从代码出发，一次性理解 JS 事件流

2024-08-26 02:44
文章标签 代码 理解 js 出发 事件 一次性

本文主要是介绍从代码出发，一次性理解 JS 事件流，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

你好，我是沐爸，欢迎点赞、收藏、评论和关注。个人知乎

掌握 JavaScript 事件流可以深入理解事件在Web页面上的传播方式，这对于开发交互式和动态网页至关重要。理解事件流可以帮助你更有效地控制事件的行为，避免不必要的事件冲突，以及实现更精细的事件监听和处理逻辑。

今天分享下什么是事件流？事件流的三个阶段？如何控制事件流？如何阻止事件传播？如何阻止默认行为？什么是事件委托？

一、事件流

JS 事件流（也称为DOM事件流）是描述在DOM中事件如何传播的机制。当用户在浏览器中执行某些操作（如点击、按键）时，这些操作会触发事件。这些事件会遵循一定的顺序在DOM元素之间传播，这个顺序和过程就是事件流。

JS 事件流有三个阶段：、捕获阶段（Capturing Phase）、目标阶段（Target Phase）和冒泡阶段（Bubbling Phase）。

捕获阶段

在捕获阶段，事件从文档的根节点（通常是<html>元素）开始，沿着DOM树向下传播到事件的目标节点（即触发事件的元素）。在这个过程中，事件会经过目标节点的所有祖先节点。在捕获阶段，事件处理器可以阻止事件的进一步传播，即取消冒泡。

目标阶段

严格来说，目标阶段并不是事件流的一个独立阶段，而是事件到达其目标元素时的一个点。在这个阶段，事件在目标元素上被处理。然而，由于这个阶段通常包含在捕获阶段和冒泡阶段之间，因此它经常被提及。

冒泡阶段

在冒泡阶段，事件从目标节点开始，沿着DOM树向上传播到文档的根节点。在冒泡阶段，事件会触发所有注册了冒泡事件监听器的节点上的事件处理程序。这是事件流中最常用的阶段，因为大多数事件处理程序都是在这个阶段注册的。

二、事件监听器

可以使用事件侦听器 addEventListener 可以控制事件流。

在JavaScript中，addEventListener 方法用于向指定元素添加事件监听器，以处理该元素上的事件。该方法接受三个参数：事件名称、事件处理函数和一个可选的布尔值，第三个参数用于指定事件在捕获阶段触发（true）还是在冒泡阶段触发（false，默认值）。以此控制事件流。

冒泡执行（默认）

JS 事件的执行顺序默认由内向外冒泡执行，即内层元素的事件侦听器会先触发，外层元素的事件侦听器后触发。

<div id="outer" style="padding: 20px; border: 1px solid #000;">  外层元素  <div id="inner" style="padding: 10px; border: 1px solid #f00;">  内层元素  </div>  
</div><script>// 获取外层元素和内层元素var outerElement = document.getElementById("outer");var innerElement = document.getElementById("inner");// 为document添加点击事件监听器document.addEventListener("click", function () {console.log("document被点击了");});// 在外层元素上为点击事件outerElement.addEventListener("click", function (event) {console.log("外层元素被点击了");});// 在内层元素上为点击事件innerElement.addEventListener("click", function (event) {console.log("内层元素被点击了");});
</script>

以上代码，点击内层元素时，会依次打印"内层元素被点击了"，“外层元素被点击了”，“document被点击了”

捕获执行

如果指定事件侦听器在捕获阶段触发，那么 JS 事件的执行顺序将由外向内执行，即外层元素的事件侦听器先触发，内层元素的事件侦听器会后触发。

<div id="outer" style="padding: 20px; border: 1px solid #000;">  外层元素  <div id="inner" style="padding: 10px; border: 1px solid #f00;">  内层元素  </div>  
</div><script>// 获取外层元素和内层元素var outerElement = document.getElementById("outer");var innerElement = document.getElementById("inner");// 为document添加点击事件监听器document.addEventListener("click", function () {console.log("document被点击了");},true // 设置捕获阶段触发);// 在外层元素上为点击事件outerElement.addEventListener("click",function (event) {console.log("外层元素被点击了");},true // 设置捕获阶段触发);// 在内层元素上为点击事件innerElement.addEventListener("click",function (event) {console.log("内层元素被点击了");});
</script>

以上代码的运行结果：

  • 点击内层元素时，会依次打印"document被点击了"，“外层元素被点击了”，“内层元素被点击了”。
  • 点击外层元素时，会依次打印"document被点击了"，“外层元素被点击了”。

变异情况

注意：当同时存在冒泡阶段执行和捕获阶段执行时，记住一个原则：捕获阶段先执行，冒泡阶段后执行。

示例一
<div id="outer" style="padding: 20px; border: 1px solid #000;">  外层元素  <div id="inner" style="padding: 10px; border: 1px solid #f00;">  内层元素  </div>  
</div><script>// 获取外层元素和内层元素var outerElement = document.getElementById("outer");var innerElement = document.getElementById("inner");// 为document添加点击事件监听器document.addEventListener("click", function () {console.log("document被点击了");},false // 冒泡阶段触发);// 在外层元素上为点击事件outerElement.addEventListener("click",function (event) {console.log("外层元素被点击了");},true // 设置捕获阶段触发);// 在内层元素上为点击事件innerElement.addEventListener("click",function (event) {console.log("内层元素被点击了");});
</script>

以上代码的运算结果：

  • 点击内层元素时，会依次打印"外层元素被点击了"，“内层元素被点击了”，“document被点击了”。
  • 点击外层元素时，会依次打印"外层元素被点击了"，“document被点击了”。
示例二
<div id="outer" style="padding: 20px; border: 1px solid #000;">  外层元素  <div id="inner" style="padding: 10px; border: 1px solid #f00;">  内层元素  </div>  
</div><script>// 获取外层元素和内层元素var outerElement = document.getElementById("outer");var innerElement = document.getElementById("inner");// 为document添加点击事件监听器document.addEventListener("click", function () {console.log("document被点击了");},true // 捕获阶段触发);// 在外层元素上为点击事件outerElement.addEventListener("click",function (event) {console.log("外层元素被点击了");},false // 冒泡阶段触发);// 在内层元素上为点击事件innerElement.addEventListener("click",function (event) {console.log("内层元素被点击了");});
</script>

以上代码的运算结果：

  • 点击内层元素时，会依次打印"document被点击了"，“内层元素被点击了”，“外层元素被点击了”。
  • 点击外层元素时，会依次打印"document被点击了"，“外层元素被点击了”。
示例三

为同一个元素设置多个事件，且不同阶段触发。

<div id="outer" style="padding: 20px; border: 1px solid #000;">  外层元素  <div id="inner" style="padding: 10px; border: 1px solid #f00;">  内层元素  </div>  
</div><script>// 获取外层元素和内层元素var outerElement = document.getElementById("outer");var innerElement = document.getElementById("inner");// 为document添加点击事件监听器document.addEventListener("click", function () {console.log("document被点击了");},// true);// 在外层元素上为点击事件outerElement.addEventListener("click",function (event) {console.log("外层元素被点击了");},false // 冒泡捕获阶段触发);// 在外层元素上为点击事件2outerElement.addEventListener("click",function (event) {console.log("外层元素被点击了2");},true // 设置捕获阶段触发);// 在内层元素上为点击事件innerElement.addEventListener("click",function (event) {console.log("内层元素被点击了");});
</script>

以上代码的运算结果：

  • 点击内层元素时，会依次打印"外层元素被点击了2"，“内层元素被点击了”，“外层元素被点击了”，“document被点击了”。
  • 点击外层元素时，会依次打印"外层元素被点击了2"，“外层元素被点击了”，“document被点击了”。

三、阻止事件传播

在事件流中，事件会在捕获阶段和冒泡阶段传播。但在某些情况下，我们可能只希望事件在捕获阶段或冒泡阶段被处理，而不希望它继续传播。此时，可以在事件处理函数中使用event.stopPropagation()方法来阻止事件进一步传播（无论是捕获阶段还是冒泡阶段）。

阻止向上冒泡

<div id="outer" style="padding: 20px; border: 1px solid #000">外层元素<div id="inner" style="padding: 10px; border: 1px solid #f00">内层元素</div>
</div><script>// 获取外层元素和内层元素var outerElement = document.getElementById("outer");var innerElement = document.getElementById("inner");// 为document添加点击事件监听器document.addEventListener("click", function () {console.log("document被点击了");});// 为外层元素添加点击事件监听器outerElement.addEventListener("click", function (event) {console.log("外层元素被点击了");// 这里原本会执行一些操作，但现在由于内层元素的阻止，这些操作在点击内层元素时不会执行});// 为内层元素添加点击事件监听器，并阻止事件冒泡innerElement.addEventListener("click", function (event) {event.stopPropagation(); // 阻止事件冒泡console.log("内层元素被点击了");// 这里执行内层元素特有的操作});
</script>

以上代码的运行结果：

  • 点击内层元素时，只会打印"内层元素被点击了"。
  • 点击外层元素时，会依次打印"外层元素被点击了"、“document被点击了”，因为外层元素依然向上冒泡。

双向阻止传递

在捕获阶段触发的事件监听器，如果设置了 event.stopPropagation(); 那么会同时阻止事件向上和向下传递，换句话说，只有点击元素自身，事件监听器才会触发。

<div id="outer" style="padding: 20px; border: 1px solid #000">外层元素<div id="inner" style="padding: 10px; border: 1px solid #f00">内层元素</div>
</div><script>// 获取外层元素和内层元素var outerElement = document.getElementById("outer");var innerElement = document.getElementById("inner");// 为document添加点击事件监听器document.addEventListener("click", function () {console.log("document被点击了");});// 为外层元素添加点击事件监听器outerElement.addEventListener("click",function (event) {event.stopPropagation();console.log("外层元素被点击了");},true);// 为内层元素添加点击事件监听器innerElement.addEventListener("click", function (event) {console.log("内层元素被点击了");});
</script>

以上代码的运行结果：

  • 点击内层元素时，只会打印"外层元素被点击了"。
  • 点击外层元素时，只会打印"外层元素被点击了"。

阻止向下传递

你可能会想，既然有阻止向上冒泡和阻止双向传递，那么应该有阻止向下传递啊，实际上是没有的。看下方代码：

<div id="outer" style="padding: 20px; border: 1px solid #000">外层元素<div id="inner" style="padding: 10px; border: 1px solid #f00">内层元素</div>
</div><script>// 获取外层元素和内层元素var outerElement = document.getElementById("outer");var innerElement = document.getElementById("inner");// 为document添加点击事件监听器document.addEventListener("click", function () {console.log("document被点击了");});// 为外层元素添加点击事件监听器outerElement.addEventListener("click", function (event) {event.stopPropagation();console.log("外层元素被点击了");});// 为内层元素添加点击事件监听器innerElement.addEventListener("click", function (event) {console.log("内层元素被点击了");});
</script>

以上代码的运行结果：

  • 点击内层元素时，会依次打印"内层元素被点击了"，“外层元素被点击了”。
  • 点击外层元素时，只会打印"外层元素被点击了"。

四、阻止默认行为

有些事件有默认行为（如点击链接会跳转，表单提交会发送数据），但在某些情况下，我们可能不希望这些默认行为发生，而是想执行一些自定义的操作。此时，可以在事件处理函数中使用event.preventDefault()方法来阻止事件的默认行为。

示例

1.阻止链接的默认跳转

<a href="https://www.example.com" id="myLink">点击我不会跳转到example.com</a><script>// 获取链接元素var link = document.getElementById("myLink");// 为链接添加点击事件监听器link.addEventListener("click", function (event) {// 阻止链接的默认跳转行为event.preventDefault();// 你的其他代码...alert("链接被点击了，但浏览器不会跳转。");});
</script>

2.阻止表单的默认提交行为

<form id="myForm"><label for="name">姓名：</label><input type="text" id="name" name="name" /><br /><br /><input type="submit" value="提交" />
</form><script>// 获取表单元素var form = document.getElementById("myForm");// 为表单添加提交事件监听器form.addEventListener("submit", function (event) {// 阻止表单的默认提交行为event.preventDefault();// 校验表单数据if (form.name.value === "") {alert("姓名不能为空！");return;}// 你的其他代码，如通过AJAX提交表单数据等console.log("表单提交成功！");});
</script>

五、事件委托

事件委托是一种优化事件处理的技术，它利用事件冒泡的原理，只在父元素上设置事件监听器，然后通过事件对象的target属性来判断事件是否发生在特定子元素上，从而执行相应的处理函数。这种方法可以减少事件监听器的数量，提高性能，特别适用于大量子元素或动态内容较多的页面。

示例

例如，在一个列表中，可能有很多项（li元素），如果每项都绑定一个点击事件监听器，那么当列表项数量很多时，会严重影响性能。此时，可以使用事件委托，只在列表的父元素上绑定一个点击事件监听器，然后在事件处理函数中判断点击的是哪个列表项，并据此执行相应的操作，并且能够处理动态添加到DOM中的元素。

<ul id="myList"><li>列表项 1</li><li>列表项 2</li><!-- 可以有更多或动态添加的 li 元素 -->
</ul>
<button id="addLi">添加更多列表项</button><script>// 获取 ul 元素var ul = document.getElementById("myList");// 为 ul 添加点击事件监听器ul.addEventListener("click", function (event) {// 检查点击事件的目标（target）是否为 li 元素if (event.target && event.target.nodeName === "LI") {// 是 li 元素，执行相应的操作event.target.style.backgroundColor = "pink"; // 例如，改变背景色console.log(event.target.innerText); // 打印点击的 li 元素的文本内容}});// 添加更多列表项的按钮点击事件document.getElementById("addLi").addEventListener("click", function () {var newLi = document.createElement("li"); // 创建一个新的 li 元素newLi.textContent = "新列表项 " + (ul.children.length + 1); // 设置 li 的文本内容ul.appendChild(newLi); // 将新的 li 元素添加到 ul 中// 注意：由于使用了事件委托，新添加的 li 元素自动具有点击事件效果});
</script>

好了，分享结束，谢谢点赞，下期再见。

这篇关于从代码出发，一次性理解 JS 事件流的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


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

相关文章

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE？1.2 SSE 的优点1.3 适用场景2. Spring WebFlu
阅读更多...
java之Objects.nonNull用法代码解读

java之Objects.nonNull用法代码解读

《java之Objects.nonNull用法代码解读》：本文主要介绍java之Objects.nonNull用法代码,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录Java之Objects.nonwww.chinasem.cnNull用法代码Objects.nonN
阅读更多...
SpringBoot实现MD5加盐算法的示例代码

SpringBoot实现MD5加盐算法的示例代码

《SpringBoot实现MD5加盐算法的示例代码》加盐算法是一种用于增强密码安全性的技术,本文主要介绍了SpringBoot实现MD5加盐算法的示例代码,文中通过示例代码介绍的非常详细,对大家的学习... 目录一、什么是加盐算法二、如何实现加盐算法2.1 加盐算法代码实现2.2 注册页面中进行密码加盐2.
阅读更多...
python+opencv处理颜色之将目标颜色转换实例代码

python+opencv处理颜色之将目标颜色转换实例代码

《python+opencv处理颜色之将目标颜色转换实例代码》OpenCV是一个的跨平台计算机视觉库,可以运行在Linux、Windows和MacOS操作系统上,：本文主要介绍python+ope... 目录下面是代码+ 效果 + 解释转HSV： 关于颜色总是要转HSV的掩膜再标注总结 目标：将红色的部分滤
阅读更多...
在C#中调用Python代码的两种实现方式

在C#中调用Python代码的两种实现方式

《在C#中调用Python代码的两种实现方式》：本文主要介绍在C#中调用Python代码的两种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#调用python代码的方式1. 使用 Python.NET2. 使用外部进程调用 Python 脚本总结C#调
阅读更多...
Java时间轮调度算法的代码实现

Java时间轮调度算法的代码实现

《Java时间轮调度算法的代码实现》时间轮是一种高效的定时调度算法,主要用于管理延时任务或周期性任务,它通过一个环形数组（时间轮）和指针来实现,将大量定时任务分摊到固定的时间槽中,极大地降低了时间复杂... 目录1、简述2、时间轮的原理3. 时间轮的实现步骤3.1 定义时间槽3.2 定义时间轮3.3 使用时
阅读更多...
Java中&和&&以及|和||的区别、应用场景和代码示例

Java中&和&&以及|和||的区别、应用场景和代码示例

《Java中&和&&以及|和||的区别、应用场景和代码示例》：本文主要介绍Java中的逻辑运算符&、&&、|和||的区别,包括它们在布尔和整数类型上的应用,文中通过代码介绍的非常详细,需要的朋友可... 目录前言1. & 和 &&代码示例2. | 和 ||代码示例3. 为什么要使用 & 和 | 而不是总是使
阅读更多...
Java强制转化示例代码详解

Java强制转化示例代码详解

《Java强制转化示例代码详解》：本文主要介绍Java编程语言中的类型转换,包括基本类型之间的强制类型转换和引用类型的强制类型转换,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录引入基本类型强制转换1.数字之间2.数字字符之间引入引用类型的强制转换总结引入在Java编程语言中，类型转换（无论
阅读更多...
Vue 调用摄像头扫描条码功能实现代码

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤：代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js
阅读更多...
mybatis-plus 实现查询表名动态修改的示例代码

mybatis-plus 实现查询表名动态修改的示例代码

《mybatis-plus实现查询表名动态修改的示例代码》通过MyBatis-Plus实现表名的动态替换,根据配置或入参选择不同的表,本文主要介绍了mybatis-plus实现查询表名动态修改的示... 目录实现数据库初始化依赖包配置读取类设置 myBATis-plus 插件测试通过 mybatis-plu
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2