JavaScript 事件流

本文被收录到:

JavaScript 教程

JavaScript 是互联网上最流行的编程语言。使用 JavaScript 可以开发网站、APP、小程序、游戏和服务器端。写这个教程是为了提高自己的 JavaScript 编程水平,而最好的学习方法就是“费曼学习法”,以教代学,以输出倒逼输入。最近日渐成熟的 AI 工具,刚好成为我写这个教程锦上添花。

目录

JavaScript事件流主要描述的是页面接收事件的顺序,它包括两种模型:事件冒泡(Event Bubbling)和事件捕获(Event Capturing)。理解事件流对于处理事件,尤其是需要对事件传播进行控制时至关重要。

1. 事件冒泡

事件冒泡是指事件从最深的节点(文档中发生的事件的目标节点)开始,然后逐级向上层节点传播事件。换句话说,事件首先由最内层的元素接收,然后传递到外层元素,一直到达文档对象(document)。

例如,在一个嵌套的HTML结构中,如果你点击了最内层的div,事件会先在此div上触发,然后向外依次触发其父div、祖父div,直至document。

Html
<div id="grandparent">
  <div id="parent">
    <div id="child">Click me!</div>
  </div>
</div>

如果在child上设置了一个点击事件监听器,那么在事件冒泡阶段,child、parent、grandparent上的点击事件监听器(如果有的话)都会依次被触发。

2. 事件捕获

与事件冒泡相反,事件捕获是从最外层的祖先元素开始,事件向下逐级传播到目标元素。这意味着,事件首先到达最外层的元素(如document),然后逐级向下,直到达到实际触发事件的元素。

事件捕获的设计目的是为了能让祖先元素有机会在事件到达目标之前就进行拦截或处理。

DOM事件流

DOM标准定义了事件流为三个阶段:

  1. 捕获阶段:事件从window对象开始,沿着DOM树向下,直到达到目标元素。
  2. 目标阶段:事件到达并执行目标元素上的事件处理函数。
  3. 冒泡阶段:事件从目标元素开始,沿着DOM树向上,再次传播到文档的根节点。

现代浏览器普遍支持通过addEventListener方法的第三个参数来指定事件处理函数是在捕获阶段还是冒泡阶段执行。传入true表示在捕获阶段执行,传入false或省略此参数则表示在冒泡阶段执行。

Javascript
element.addEventListener('click', function(event) {
  // 处理函数
}, false); // 默认,冒泡阶段
element.addEventListener('click', function(event) {
  // 处理函数
}, true); // 捕获阶段

理解事件流模型有助于开发者更精确地控制事件的处理流程,根据需求选择合适的事件处理策略。

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
搜神记
766 文章
4 教程
8 项目
随机推荐
Node.js test 模块
WordPress 分页
JavaScript 事件
Linux 中 top 命令的 Load Average 含义
WordPress用户的user_login, user_nicename, display_name 和 nickname有什么区别
HTML textarea 文本输入框
MySQL 表名预处理
WordPress 自定义 JWT 授权和验证