JavaScript DOM事件流事件捕获事件冒泡

╰+哭是因爲堅強的太久メ 2022-12-04 01:09 180阅读 0赞

### 事件 ###

在讲事件流之前，我们先来了解一下事件。

JavaScript与HTML之间的交互是通过事件来实现的。事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。我们可以使用侦听器（或事件处理程序）来预订事件，以便事件发生时执行相应的代码。说白了，就是当我们对页面上的某些元素进行某些操作（比如鼠标单击）时产生一些特定的行为。比如鼠标单击一个按钮然后弹出一个对话框。这里就涉及到了按钮的click事件，产生的行为就是弹出了一个对话框。

事件最早是在IE3和Netscape Navigator2 中出现的，当时是作为分担服务器运算负载的一种手段。在IE4和Navigator4发布时，这两种浏览器提供了相似但不同的API

### 事件类型 ###

web浏览器中可能发生的事件有很多类型，不同的事件类型具有不同的事件信息，在“DOM3级事件”中规定了如下几类事件类型：

*  UI（User Interface用户界面）事件，当用户与页面上的元素交互时触发
 *  焦点事件，当元素获得或失去焦点是触发
 *  鼠标事件，当用户通过鼠标在页面上执行操作时触发
 *  滚轮事件，当使用鼠标滚轮（或类似设备）时触发
 *  文本事件，当在文档中输入文本时触发
 *  键盘事件，当用户通过键盘在页面上执行操作时触发
 *  合成事件，当为IME（Input Method Edtor，输入法编辑器）输入字符时触发
 *  变动（mutation）事件，当底层DOM结构发生变化时触发

有三种绑定事件的方式：

*  直接在dom元素上指定相应的事件，例如鼠标单击事件：

*  通过JavaScript获取到元素对象，然后通过对象属性的方式绑定事件

<div id='clickMe'>点我</div>
    <script>
        var div = document.querySelector('#clickMe')
        div.onclick=function(){
            alert('我是click')
        }
    </scripit>

*  通过事件侦听器addEventListener(）来绑定事件

<div id='clickMe'>点我</div>
    <script>
        var div = document.querySelector('#clickMe')
        //这里需要注意的是，用事件侦听器绑定事件是没有on的
        div.addEventListener('click',function(){
            alert('我是侦听器中的click');
        })
    </scripit>

### 事件流 ###

事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流

### 事件流的理解 ###

假如现在在页面上有三个div盒子组成的同心圆（如下图所示），然后我们给每个圆都绑定一个鼠标点击（click）事件。当我们点击最内侧的粉色小圆时会触发小圆的click事件，然后事件会从内到外依次向上传播直到到达document而停止。所以会依次弹出“我是粉圆”、“我是黄圆”和“我是绿圆”三个弹出框，那么如果我们给body、html和document也绑定了click事件，那么这几个元素的click事件也会被依次触发。这样就形成了一个事件流。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70][]

实际上DOM事件流有三个阶段：

*  事件捕获阶段：捕获阶段是从外到内传播即从根节点向最内侧节点传播，与我们上面例子中讲到的刚好相反
 *  事件目标阶段：目标阶段就是事件到达我们具体点击的那个元素时的阶段，在上面的案例中就是粉圆
 *  事件冒泡阶段：冒泡阶段就是我们上面案例中将的一样，从内向外传播直到根节点结束

那么为什么会有捕获阶段（从外到内）和冒泡阶段（从内到外）两种事件流呢？那么是不是每次事件被触发都要经过捕获阶段和冒泡阶段，从而导致一个事件被执行两次呢（答案显然不是这样的）？

这是因为，当时IE和Netscape团队都提出了事件流的概念，但是两个团队提出的事件流的方向却是完全相反的。IE的事件流是事件的冒泡流即从内到外，而Netscape提出的是事件的捕获流即从外到内。所以会出现捕获流和冒泡流两个阶段。而实际在我们触发一个事件后对应的代码只会执行一次，这是因为默认情况下只会经过事件冒泡流传播，而不会触发捕获流，所以在触发事件后对应的代码只会执行一次，然后依次向上冒泡。

### 事件冒泡阶段 ###

IE的s事件流叫做事件冒泡（event bubbling），即事件开始时有最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。以下面的代码为例：

<!DOCTYPE html>
    <html>
    <head>
        <title>Event Bubbling Example</title>
    </head>
    <body>
        <div id="myDiv">Click Me></div>
    </body>
    </html>

如果我们点击了页面中的div元素，那么这个click事件会按照如下顺序传播：

1.  <div>
2.  <body>
3.  <html>
4.  document

也就是说，click事件首先在div元素上发生，而这个元素就是我们单击的元素，然后click事件沿着DOM树向上传播，在每一级节点上都会发生，直至传播到document对象。下图展示了事件冒泡的过程。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70 1][]

所有浏览器都支持事件冒泡，但在具体实现上还是有一些差别。IE5.5及更早版本中的事件冒泡会跳过html元素，从body直接到document，IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象。

### 事件捕获阶段 ###

Netscape团队提出的另一种事件流叫做事件捕获（event capturing）。事件捕获的思想是不太具体的节点应该更早接收事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预订目标之前捕获它。如果仍以前面的HTML代码为例，那么点击div元素就会按下列顺序触发click事件。

1.  documnet
2.  <html>
3.  <body>
4.  <div>

在事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标，即div元素。下图展示了事件捕获过程

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70 2][]

虽然事件捕获是Netscape唯一支持的事件流模型，但IE9、Safari、Chrome、Opera和Firefox目前也都支持这种事件流模型。尽管“DOM2级事件”规范要求事件应该从document对象开始传播，但这些浏览器都是从windows对象开始传播捕获事件的。由于老版本浏览器不支持，因此很少有人使用事件捕获。我们可以放心使用事件冒泡。再有特殊需要时再使用事件捕获。

虽然现在主流的浏览器都支持事件捕获流模型，但是我们上面也提到过，默认情况下都是以事件冒泡流的模型进行事件传播。那么如果我们就是想要让 事件以捕获流模型传播应该怎么办呢？这个时候我们就必须要用事件侦听器（addEventListener）的形式来绑定事件了，事件侦听器addEventListener接收三个参数：第一个是要绑定的事件类型、第二个是当事件被触发时要执行的代码、第三个参数是一个Boolean类型的可选参数（默认是false），这个参数就是决定事件流是以捕获的形式还是以冒泡的形式传播。true表示以捕获流模式传播，false表示以冒泡流模式传播，默认为false即默认以冒泡流传播。看下面的代码：

<div id="clickMe"></div>
    <script>
        var myDiv = document.querySelector("#clickMe");
        myDiv.addEventListener('click',function(){
            console.log('我会以捕获流模式传播');
        },true);
    </script>

上面的代码中我们给div添加了单击事件，并传递了第三个参数true，这时事件流将以捕获流的模式进行传播。

### 处于目标阶段 ###

上面我们提到，由于IE和Netscape两个团队提出了完全相反的事件流的概念，用谁弃谁都不合适，于是最终就采取了一个比较折中的办法就是：在事件流的三个阶段中，首先经过事件捕获阶段，然后是实际目标接收到事件即处于目标阶段，最后再经过事件冒泡阶段，最终事件流结束。以下是DOM事件流的完整图片：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70 3][]

那么这样就会引发另一个问题，既然捕获阶段和冒泡阶段都要经过，那么当我们触发一个事件时，同一段代码岂不是要执行两次？为了解决这一问题，最终规定默认情况下都是以事件冒泡流的模式进行事件传播（IE获胜）。如果想要一捕获模式传播那就需要用到我们上面介绍的方法用侦听器绑定事件并将第三个参数设置为true即可。

### 阻止冒泡 ###

无论事件是以冒泡模式传播还是以捕获模式传播，都会有一个问题，有时候我们不想让事件向上或向下传播，即我们触发哪个元素的事件，事件就停留在哪个元素而不进行传播。那就是接下来我们要说的阻止冒泡。

事件的冒泡是可以被阻止的，防止事件冒泡而带来不必要的错误和困扰。阻止冒泡的方法就是stopPropagation()，看如下示例代码：

<div id="clickMe">ClickMe</div>
    <script>
        var div = document.querySelector('#clickMe');
        div.addEventListener('click', function(event){
            console.log('事件冒泡被阻止了');
            event.stopPropagation();
        });
    </script>

上面的代码中，在事件处理函数中接收一个event参数，然后通过调用event.stopPropagation()方法就可以阻止冒泡了。

以上就是DOM事件流相关介绍。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70]: /images/20221123/973786d8549143d6b65a9798ec83430f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70 1]: /images/20221123/a7f64379d9ae4282bed82568a60aed4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70 2]: /images/20221123/b94eb5457686424c8fbe2e150a16a9f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70 3]: /images/20221123/2f699450742c442b8dab3cb27a8a0098.png