最容易理解的 js事件冒泡原理

最新推荐文章于 2025-06-08 15:44:34 发布

可是我才两岁呀

最新推荐文章于 2025-06-08 15:44:34 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.csdn.net/qq_40467180/article/details/105791204

本文深入解析JavaScript事件冒泡原理，阐述了DOM事件流的三个阶段：事件捕获、处于目标阶段和事件冒泡。介绍了如何使用addEventListener和removeEventListener进行事件监听与移除，以及如何利用stopPropagation和preventDefault控制事件行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前些时间有位大佬问到“js冒泡原理”，平时也只是用冒泡处理各种特效和功能，这里给大家详细介绍下js冒泡原理

事件冒泡 字如其名就是会逐层向上的触发，与之相对的是 事件捕获

首先我们要知道什么是 DOM

DOM可以理解为是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML元素上产生一个事件时，该事件会在DOM树中元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这整个传播过程就是DOM事件流。

DOM事件流存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

1，事件捕获：当鼠标点击或者触发DOM元素时，浏览器会从根节点由外而内的进行事件传播

2，事件冒泡：与事件捕获相反，事件冒泡是由内到外进行事件传播，直到根节点。

DOM标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。

常用的冒泡事件的API :

1，addEventListener(event, function, useCapture) 设定一个事件监听器，当某一事件发生通过设定的参数执行操作

  参数 event 是必须的，表示监听的事件，例如 click, touchstart 等，就是之前不加前缀 on 的事件。
      参数 function 是必须的，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。
      参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是捕获，true表示捕获，默认的false表示冒泡。

2，removeEventListener(event, function, useCapture) 移除 addEventListener() 添加的事件监听

具体参数和 addEventListener(event, function, useCapture) 相同

3.stopPropagation() 阻止事件的冒泡

该函数只阻止事件向祖辈元素的传播，不会阻止该元素自身绑定的其他事件处理函数的函数。

4.preventDefault() 取消事件的默认动作

事件委托：

e.target表示在事件冒泡中触发事件的源元素
event.target.nodeName 　　-- 获取事件触发元素标签name（li,p…）
event.target.id　　　　　　-- 获取事件触发元素id
event.target.className　　-- 获取事件触发元素classname
event.target.innerHTML　　-- 获取事件触发元素的内容（li）