从代码出发，一次性理解 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。

相关文章

利用Python调试串口的示例代码

利用Python调试串口的示例代码

《利用Python调试串口的示例代码》在嵌入式开发、物联网设备调试过程中,串口通信是最基础的调试手段本文将带你用Python+ttkbootstrap打造一款高颜值、多功能的串口调试助手,需要的可以了... 目录概述：为什么需要专业的串口调试工具项目架构设计1.1 技术栈选型1.2 关键类说明1.3 线程模
阅读更多...
Python Transformers库(NLP处理库)案例代码讲解

Python Transformers库(NLP处理库)案例代码讲解

《PythonTransformers库(NLP处理库)案例代码讲解》本文介绍transformers库的全面讲解,包含基础知识、高级用法、案例代码及学习路径,内容经过组织,适合不同阶段的学习者,对... 目录一、基础知识1. Transformers 库简介2. 安装与环境配置3. 快速上手示例二、核心模
阅读更多...
Java的栈与队列实现代码解析

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念（Stack）栈的实现代码队列（Queue）模拟实现队列(双链表实现)循环队列（循环数组
阅读更多...
使用Java将DOCX文档解析为Markdown文档的代码实现

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown（MD）因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析
阅读更多...
C++使用printf语句实现进制转换的示例代码

C++使用printf语句实现进制转换的示例代码

《C++使用printf语句实现进制转换的示例代码》在C语言中,printf函数可以直接实现部分进制转换功能,通过格式说明符（formatspecifier）快速输出不同进制的数值,下面给大家分享C+... 目录一、printf 原生支持的进制转换1. 十进制、八进制、十六进制转换2. 显示进制前缀3. 指
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
Node.js 数据库 CRUD 项目示例详解(完美解决方案)

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》：本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/
阅读更多...
深入理解Apache Kafka(分布式流处理平台)

深入理解Apache Kafka(分布式流处理平台)

《深入理解ApacheKafka(分布式流处理平台)》ApacheKafka作为现代分布式系统中的核心中间件,为构建高吞吐量、低延迟的数据管道提供了强大支持,本文将深入探讨Kafka的核心概念、架构... 目录引言一、Apache Kafka概述1.1 什么是Kafka？1.2 Kafka的核心概念二、Ka
阅读更多...
使用Node.js制作图片上传服务的详细教程

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例
阅读更多...
使用Python实现全能手机虚拟键盘的示例代码

使用Python实现全能手机虚拟键盘的示例代码

《使用Python实现全能手机虚拟键盘的示例代码》在数字化办公时代,你是否遇到过这样的场景：会议室投影电脑突然键盘失灵、躺在沙发上想远程控制书房电脑、或者需要给长辈远程协助操作？今天我要分享的Pyth... 目录一、项目概述：不止于键盘的远程控制方案1.1 创新价值1.2 技术栈全景二、需求实现步骤一、需求
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2