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

相关文章

JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
认识、理解、分类——acm之搜索

认识、理解、分类——acm之搜索

普通搜索方法有两种：1、广度优先搜索；2、深度优先搜索； 更多搜索方法： 3、双向广度优先搜索； 4、启发式搜索（包括A*算法等）； 搜索通常会用到的知识点：状态压缩（位压缩，利用hash思想压缩）。
阅读更多...
禁止平板,iPad长按弹出默认菜单事件

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

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

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式（Singleton Pattern） 确保一个类只有一个实例，并提供一个全局访问点。 示例代码： class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)
阅读更多...
poj 1258 Agri-Net（最小生成树模板代码）

poj 1258 Agri-Net（最小生成树模板代码）

感觉用这题来当模板更适合。 题意就是给你邻接矩阵求最小生成树啦。~ prim代码：效率很高。172k...0ms。 #include<stdio.h>#include<algorithm>using namespace std;const int MaxN = 101;const int INF = 0x3f3f3f3f;int g[MaxN][MaxN];int n
阅读更多...
【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入（Embedding）方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节：嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”，它将文本中的单词或短语转换成计算机能够理解的数学形式，即向量。 正如翻译机将一种语言
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
【C++高阶】C++类型转换全攻略：深入理解并高效应用

【C++高阶】C++类型转换全攻略：深入理解并高效应用

📝个人主页🌹：Eternity._ ⏩收录专栏⏪：C++ “ 登神长阶 ” 🤡往期回顾🤡：C++ 智能指针 🌹🌹期待您的关注 🌹🌹 ❀C++的类型转换 📒1. C语言中的类型转换📚2. C++强制类型转换⛰️static_cast🌞reinterpret_cast⭐const_cast🍁dynamic_cast 📜3. C++强制类型转换的原因📝
阅读更多...
Node.js学习记录（二）

Node.js学习记录（二）

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2