【温故而知新】JavaScript的事件模型

2024-01-07 20:44
文章标签 java script 模型 事件 温故而知新

本文主要是介绍【温故而知新】JavaScript的事件模型，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、概念

JavaScript的事件模型是一种用于处理用户交互和其他事件的机制。事件模型基于事件驱动编程的概念，即在特定条件下触发相应的事件处理程序。以下是JavaScript事件模型的基本原则：

  1. 事件触发：事件可以由用户交互（如点击、鼠标移动）、浏览器（如页面加载完成、窗口大小改变）或其他代码触发。
  2. 事件类型：每个事件都有一个特定的类型（例如点击事件、鼠标移动事件）。
  3. 事件监听器：程序可以注册事件监听器来处理特定类型的事件。监听器是一个函数，当事件触发时，该函数会被调用。
  4. 事件冒泡：事件可以在HTML文档中的多个元素之间冒泡传递。例如，当用户点击一个元素时，点击事件会从该元素开始向上冒泡，直到到达根元素。这使得可以在祖先元素上注册一个监听器，以处理多个子元素的事件。
  5. 事件捕获：除了冒泡传递之外，事件还可以在捕获阶段触发监听器。在捕获阶段，事件从根元素开始，逐级向下传递，直到到达目标元素。
  6. 事件对象：在事件处理程序被调用时，一个事件对象会作为参数传递给该函数。事件对象包含与事件相关的属性和方法，例如事件的类型、触发事件的元素等。
  7. 默认行为：某些事件具有默认的行为，例如点击一个链接会导航到链接的URL。通过调用preventDefault()方法，可以阻止事件的默认行为。

通过使用事件模型，可以为用户交互和浏览器事件编写响应代码，增强网页的交互性和功能性。

二、案例

  1. 一个简单的 JavaScript 事件模型案例代码，它演示了如何添加和触发一个点击事件
<!DOCTYPE html>  
<html>  
<head>  <title>JavaScript Event Model Example</title>  
</head>  
<body>  <h1>Click the button</h1>  <button id="myButton">Click me</button>  <script>  // 获取按钮元素  var button = document.getElementById("myButton");  // 添加点击事件处理程序  button.addEventListener("click", function() {  alert("Button clicked!");  });  </script>  
</body>  
</html>在上面的代码中，我们首先通过 document.getElementById 方法获取了按钮元素。然后，我们使用 addEventListener 方法添加了一个点击事件处理程序。当用户点击按钮时，浏览器会执行这个处理程序，弹出一个包含消息 "Button clicked!" 的警告框。
  1. 一个简单的JavaScript事件模型的案例代码，用于在按钮点击时改变文本颜色：
<!DOCTYPE html>
<html>
<head><title>JavaScript事件模型示例</title>
</head>
<body><button id="myButton">点击我</button><p id="myText">这是一个段落</p><script>// 获取按钮和文本元素var button = document.getElementById("myButton");var text = document.getElementById("myText");// 创建事件处理程序function changeColor() {text.style.color = "red";}// 注册事件监听器button.addEventListener("click", changeColor);</script>
</body>
</html>

在上述代码中，我们首先通过document.getElementById方法获取了一个按钮和一个段落的元素对象。然后，我们定义了一个名为changeColor的事件处理程序，该程序会在按钮被点击时被调用。在changeColor函数中，我们使用style属性来改变段落元素的文本颜色为红色。

最后，我们通过addEventListener方法将事件监听器注册到按钮上，告诉按钮在点击事件发生时调用changeColor函数。

当用户点击按钮时，段落的文本颜色将会改变为红色。这个例子演示了如何使用JavaScript事件模型来实现交互性功能。

  1. 事件捕获
    一个使用JavaScript事件捕获的案例代码：
<!DOCTYPE html>
<html>
<head><title>JavaScript事件捕获示例</title>
</head>
<body><div id="outer"><div id="inner"><button id="myButton">点击我</button></div></div><script>// 获取元素var outer = document.getElementById("outer");var inner = document.getElementById("inner");var button = document.getElementById("myButton");// 创建事件处理程序function logEvent(event) {console.log(event.target.id + " 被点击了");}// 注册事件监听器，使用事件捕获outer.addEventListener("click", logEvent, true);inner.addEventListener("click", logEvent, true);button.addEventListener("click", logEvent, true);</script>
</body>
</html>

在上述代码中，我们有一个包含按钮的嵌套DIV结构。我们通过document.getElementById方法获取了外部DIV、内部DIV和按钮的元素对象。

我们定义了一个名为logEvent的事件处理程序，在每次点击事件发生时会将被点击元素的ID打印到控制台上。

然后，我们使用addEventListener方法将事件监听器注册到外部DIV、内部DIV和按钮上，并将最后一个参数设置为true，表示使用事件捕获模式。

当用户点击按钮时，事件的捕获阶段将从外部DIV开始，并逐级向内部DIV和按钮传播，最终触发事件处理程序。控制台将会打印出被点击元素的ID。

这个例子演示了如何使用JavaScript事件捕获来追踪事件在DOM树中的传播过程。

  1. 事件冒泡
    一个使用JavaScript事件冒泡的案例代码：
<!DOCTYPE html>
<html>
<head><title>JavaScript事件冒泡示例</title>
</head>
<body><div id="outer"><div id="inner"><button id="myButton">点击我</button></div></div><script>// 获取元素var outer = document.getElementById("outer");var inner = document.getElementById("inner");var button = document.getElementById("myButton");// 创建事件处理程序function logEvent(event) {console.log(event.target.id + " 被点击了");}// 注册事件监听器，使用事件冒泡outer.addEventListener("click", logEvent);inner.addEventListener("click", logEvent);button.addEventListener("click", logEvent);</script>
</body>
</html>

在上述代码中，我们与前面的案例相同，有一个包含按钮的嵌套DIV结构。我们通过document.getElementById方法获取了外部DIV、内部DIV和按钮的元素对象。

我们定义了一个名为logEvent的事件处理程序，在每次点击事件发生时会将被点击元素的ID打印到控制台上。

然后，我们使用addEventListener方法将事件监听器注册到外部DIV、内部DIV和按钮上，但这次没有指定第三个参数，即默认为false，表示使用事件冒泡模式。

当用户点击按钮时，事件的冒泡阶段将从按钮开始，逐级向外部DIV和内部DIV传播，最终触发事件处理程序。控制台将会打印出被点击元素的ID。

这个例子演示了如何使用JavaScript事件冒泡来追踪事件在DOM树中的冒泡过程。

三、后记

JavaScript是一种广泛应用于网页开发的脚本语言，它可以用来为网页添加交互性和动态特效。JavaScript可以在网页中直接嵌入，也可以作为外部文件引用。

以下是JavaScript的一些重要特点和用法：

  1. 脚本语言：JavaScript是一种解释型脚本语言，不需要编译，可以直接在浏览器中执行。
  2. 弱类型语言：JavaScript是一种弱类型语言，变量的数据类型可以随时改变，不需要声明变量的类型。
  3. 事件驱动：JavaScript可以通过监听用户的操作或者其他事件触发特定的代码执行，实现网页的交互性。
  4. DOM操作：JavaScript可以通过文档对象模型（DOM）来操作网页的HTML元素，可以动态地添加、修改和删除元素。
  5. 表单验证：JavaScript可以通过表单验证来确保用户输入的数据符合要求，提供更好的用户体验。
  6. AJAX：JavaScript可以通过AJAX技术实现网页的异步加载，可以在不刷新整个页面的情况下更新部分内容。
  7. JSON：JavaScript Object Notation（JSON）是一种轻量级的数据交换格式，JavaScript可以很方便地解析和生成JSON数据。
  8. 库和框架：JavaScript拥有丰富的库和框架，如jQuery、React、Angular等，可以简化开发过程并提供更强大的功能。

JavaScript是一种强大且灵活的语言，可以用来创建复杂的交互式网页，并且可以与HTML和CSS无缝配合，实现出色的用户体验。

四、热门文章

【温故而知新】JavaScript的Document对象
【温故而知新】JavaScript的BOM之Screen/Location/History对象
【温故而知新】JavaScript的BOM之Navigator对象
【温故而知新】JavaScript的BOM之Window对象
【温故而知新】JavaScript数据结构详解
【温故而知新】JavaScript数据类型
RESTful API，如何构建 web 应用程序
jQuery实现轮播图代码
vue实现文本上下循环滚动
Vue运用之input本地上传文件，实现传参file:(binary)
js判断各种浏览器
uni-app详解、开发步骤、案例代码

这篇关于【温故而知新】JavaScript的事件模型的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/581184。

相关文章

JVM 的类初始化机制

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时，有没有考虑过 JVM 是如何把静态的字节码（byte code）转化为运行时对象的呢，这个问题看似简单，但清楚的同学相信也不会太多，这篇文章首先介绍 JVM 类初始化的机制，然后给出几个易出错的实例来分析，帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段，分别是：loading 、Linking、initialization
阅读更多...
Spring Security 基于表达式的权限控制

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权，允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true （Spring security默认会带有ROLE_前缀）,去
阅读更多...
浅析Spring Security认证过程

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程，特意画了如下的类图，包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口，接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti
阅读更多...
Spring Security--Architecture Overview

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类，它们之间的依赖，构建起了整个框架。想要理解整个架构，最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文（security context）的信息。当前操作的用户是谁，该用户是否已经被认证，他拥有哪些角色权限…这些都被保
阅读更多...
Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
Java架构师知识体认识

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物
阅读更多...
大模型研发全揭秘：客服工单数据标注的完整攻略

大模型研发全揭秘：客服工单数据标注的完整攻略

在人工智能（AI）领域，数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者，掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中，工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注，不仅能够帮助提升客服自动化系统的智能化水平，还能优化客户服务流程，提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行
阅读更多...
Java进阶13讲__第12讲_1/2

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory
阅读更多...
禁止平板,iPad长按弹出默认菜单事件

禁止平板,iPad长按弹出默认菜单事件

通过监控按下抬起时间差来禁止弹出事件，把以下代码写在要禁止的页面的页面加载事件里面即可     var date;document.addEventListener('touchstart', event => {date = new Date().getTime();});document.addEventListener('touchend', event => {if (new
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2