JavaScript事件捕获和冒泡

最新推荐文章于 2024-07-19 11:40:48 发布

咕嘟咕嘟咕嘟～

最新推荐文章于 2024-07-19 11:40:48 发布

阅读量356

点赞数

分类专栏： JavaScript 文章标签： JavaScript 事件捕获冒泡

本文链接：https://blog.csdn.net/qq_45499370/article/details/101107460

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript事件捕获和冒泡

JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或者浏览器窗口中发生的一些 特定的交互瞬间。

事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，网景的事件流是事件捕获流。

事件冒泡

事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。以下面的HTML文档为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>click me</div>
</body>
</html>

若单击了页面中的div元素，那么这个click事件会按照如下顺序传播：
div–>body–>html–>document
也就是说，click事件首先在我们单击的div元素上发生，然后click沿DOM树向上传播，在每一级节点上都会发生，直至传播到document对象。

事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于事件到达预定目标之前捕获它。
如果仍以前面的例子，那么单击div元素会以下列顺序触发click事件：
document–>html–>body–>div
在事件捕获过程中，document对象首先接收到click事件，然后沿DOM树依次向下，一直传播到事件的实际目标，即div元素。

注册事件和解除事件

注册事件： addEventListener(‘事件名称’,‘事件回调’,true/false)
addEventListener最后一个参数为true为时执行事件捕获，为false时执行是事件冒泡

解除事件：removeEventListener

阻止冒泡：
IE中：window.event.cancleBubble=true;
非IE：event.stopPropagation();

捕获和冒泡执行顺序

若目标元素未注册事件，默认先进入捕获阶段，直到达到目标元素，再进入冒泡阶段；
若目标元素注册了事件，当事件触发在目标阶段时，会根据事件注册的先后顺序执行，其他非目标阶段执行顺序不变。假如父元素包裹子元素，子元素设置为事件冒泡，则执行顺序为：
父元素捕获–>子元素冒泡–>目标元素执行绑定的事件–>子元素捕获–>父元素冒泡

面试常见：在一个DOM元素上同时绑定两个点击事件，一个用捕获，一个用冒泡，事件会执行两次（执行次数等于绑定次数，前提是事件确实被触发，且事件绑定几次就算几个事件，即使类型和功能完全一样也不会覆盖），目标元素会按时间绑定顺序执行，不区分冒泡和捕获，非目标元素先执行捕获再执行冒泡。