冒泡和捕获

作者: 微风玉米 | 来源:发表于2017-06-17 18:56 被阅读0次

事件冒泡和事件捕获
冒泡和捕获
捕获和冒泡
捕获和冒泡
JavaScript 事件捕获和冒泡
2021-01-18 - 草稿
js 阻止冒泡阻止默认事件
默认事件
JS事件的冒泡捕获--发生了什么
day29-web前端之jQuery及Ajax

在浏览器中，事件的传播方式分为：事件冒泡和事件捕获。那么事件冒泡和事件捕获分别是什么？为什么会出现两种传播方式呢？

一、前提

在浏览器中用户点击鼠标，操作系统最先知道，浏览器次之。
页面中子元素被点击了，意味着父元素也被点击。
如果子元素和父元素同时监听了点击事件，那么点击子元素后，是子元素先知道，还是父元素先知道。而这个知道的前后顺序，就是由事件传播方式决定的。

二、冒泡模式和捕获模式

事件的传播途径是通过文档节点组成的有序列表。在DOM里面，这个事件传播路径的最后一点就是事件对象（Event Target）本身，其之前的元素就是事件对象的祖先元素。

触发事件后：
- 对于冒泡模式，事件首先被事件对象本身知道，然后让其父元素知道，就这样在祖先元素中一层层向外传播，直至window 对象，如果中间有节点设置监听这个事件，就调用其监听函数。
- 对于捕获模式，事件首先被window 对象知道，然后到document 节点，最后才被事件对象本身知道，如果中间有节点监听此事件，就调用监听函数。
  例子:

<html>
        <head>
            <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
            <meta charset="utf-8">
            <title>example</title>
        </head>
        <body>
            <ul>
                <li>item1</li>
                <li>item2</li>
                <li class="clicked">item3</li>
            </ul>
        </body>
    </html>

在上面例子的结构中，假设我在item3 用鼠标点击了一下。
- 在捕获模式中，事件是按以下顺序传播的：window --> document --> <html> --> <body> --> <ul> --> <li class="clicked">,如果有节点监听点击事件，那么就在传播到那个节点的时候调用事件函数。
- 在冒泡模式中，事件的传播顺序是同捕获模式相反的：<li class="clicked"> --> <ul> --> <body> --> <html> --> document --> window,如果有节点监听点击事件，那么就在传播到那个节点的时候调用事件函数。

三、设置冒泡模式或捕获模式

在十几年前，那时候浏览器各自为政，其中一个巨头网景公司主张捕获模式，所以那时它的浏览器只支持捕获模式；而另一巨头微软公司支持冒泡模式，所以IE 9 以前的版本只支持冒泡模式。在2000 年的时候，w3c 将两种模式都写入标准里面，所以现在大部分浏览器都支持两种模式。

我们可以使用addEventListener(type, listener, useCapture) 方法来设置事件的传播模式，如果想要捕获模式，就将第三个参数useCapture 设为true 。如果想要冒泡模式，可以将第三个参数设为false 或者直接省略第三个参数，因为不传入参数的时候，参数值为undefined 。

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body>
    <div>1
        <div>2
            <div>3
                <div>4
                    <div>5</div>
                </div>
            </div>
        </div>
    </div>
    <section id="alog"></section>
    <script>
        var divs = document.getElementsByTagName('div');
        function capture() {
            log('capture: ' + this.firstChild.nodeValue.trim())
        }
      
        function bubble() {
            log('bubble: ' + this.firstChild.nodeValue.trim())
        }

        for (var i = 0; i < divs.length; i++) {
            divs[i].addEventListener('click', capture, true);
            divs[i].addEventListener('click', bubble, false);
        }

        function log(msg) {
            var p = document.createElement('p');
            p.textContent = msg;
            alog.appendChild(p);
        }
    </script>
</body>
</html>

下图是我点击div 5 的结果

在两种模式混用的情况下，如果是事件对象（Event Target）的父元素，按先捕获后冒泡的顺序进行。如果是事件对像自身，那么谁先监听就先执行谁。在实际工作中不推荐混用两种模式。

例子：对上面代码进行小小的改动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body>
    <div>1
        <div>2
            <div>3
                <div>4
                    <div>5</div>
                </div>
            </div>
        </div>
    </div>
    <section id="alog"></section>
    <script>
        var divs = document.getElementsByTagName('div');
        function capture() {
            log('capture: ' + this.firstChild.nodeValue.trim())
        }
      
        function bubble() {
            log('bubble: ' + this.firstChild.nodeValue.trim())
        }

        for (var i = 0; i < divs.length; i++) {
/* 只是调换了下面两句语句的位置*/
            divs[i].addEventListener('click', bubble, false); 
            divs[i].addEventListener('click', capture, true);
//  其他语句不变
        }

        function log(msg) {
            var p = document.createElement('p');
            p.textContent = msg;
            alog.appendChild(p);
        }
    </script>
</body>
</html>

下图是我点击div 5 的结果