事件处理程序模型，事件的冒泡和捕获

最新推荐文章于 2025-12-04 17:39:28 发布

原创最新推荐文章于 2025-12-04 17:39:28 发布 · 143 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

js事件专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了事件冒泡和事件捕获的概念，这两种机制在元素的事件传播中起着关键作用。事件冒泡是从子元素到父元素的自底向上传播，而事件捕获则是自顶向下从父元素到子元素。此外，还讨论了事件的三个阶段：捕获、目标和冒泡阶段，并解释了如何通过addEventListener设置事件处理模型。重点提及了事件对象在事件处理过程中的重要性，以及不同浏览器对事件处理的支持情况。

1、事件冒泡

结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）

2、事件捕获

结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）
// 将addEventListener的第三个参数设置为true则可启用事件捕捉模型
// ie8以下由于不支持addEventListener，故没有事件捕获的事件处理模型
// focus,blur,change,submit,reset,select等事件不冒泡

3、事件的三个阶段

a) 先捕获，后目标，再冒泡
在这里插入图片描述
//对于目标元素而言，不存在事件处理模型，事件触发则执行，先绑定谁就执行谁
b) 默认在冒泡的时候执行事件（onclick/attach 和 addEventListener传false的时候）
c) addEventListener绑定事件，如果把第三个参数设置为true，则在捕捉的时候执行事件
d) 整个事件处理过程，会有个event事件对象在整个事件过程传播（W3C标准，ie8及其以下没有）