事件绑定的原理，冒泡与捕获概念.

作者: dosher_多舍 | 来源:发表于2019-03-14 00:40 被阅读0次

事件绑定的原理，冒泡与捕获概念.
事件
原始类型与事情委托
小程序中点击子元素事件而不触发父元素的点击事件
Javascript事件系统
事件绑定、事件冒泡与捕获
详解JS中的事件机制(带实例)
事件冒泡和事件捕获
Javascript事件系统
事件生僻知识学习笔记

要想Javascript对用户的操作做出响应，首先要对DOM元素绑定事件处理函数。所谓处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。

事件绑定

在Javascript中，有三种常用的绑定事件的方法：

在DOM元素中直接绑定；

<div onclick="handleCLick()"></div>

在JavaScript代码中通过dom元素的属性绑定；

<div id="btn"></div>
<script>
    var thisBtn = document.getElementById('btn')
    thisBtn.onclick = function() {
        console.log('this is div#btn click')
    }
</script>

绑定事件监听函数

<div id="btn"></div>
<script>
    var dom = document.getElementById("btn")
    function handleBtn(){
        console.log('this is div#btn')
    }

    <!-- IE下使用attachEvent/detachEvent函数进行事件绑定和取消。不是W3C标准的做法，所以不推荐使用 -->
    /*
        1.事件处理函数中this代表的是window对象，不是dom对象。
        2.同一个事件处理函数只能绑定一次。
    */
    <!-- bind -->
    dom.attachEvent('onclick', handleBtn)
    <!-- unbind -->
    dom.detachEvent('onclick', handleBtn)
    <!-- 使用W3C标准的addEventListener和removeEventListener。不支持IE6/7/8 -->
    <!-- bind -->
    dom.addEventListener('click', handleBtn)
    <!-- unbind -->
    dom.removeEventListener('click', handleBtn)
</script>

事件冒泡与捕获

事件冒泡和捕获是DOM中事件传播的两种方式，比如说对于注册了相同事件的两个DOM元素，当点击里层DOM元素时候，这两个事件谁先执行。

冒泡事件：由里向外，最里层的元素先执行，然后冒泡到外层。

捕获事件：由外向里，最外层的元素先执行，然后传递到内部。

在 IE 9 之前是只支持事件冒泡，IE 9(包括 IE 9) 之后和目前主流的浏览器都同时支持两种事件。只需修改 addEventListener的第三个参数，true 为捕获，false 为冒泡，默认为冒泡。
addEventListener

网景和微软曾经的战争还是比较火热的，当时，网景主张捕获方式，微软主张冒泡方式。后来 w3c采用折中的方式，平息了战火，制定了统一的标准——先捕获再冒泡。

addEventListener有三个参数(第三个参数就是为冒泡和捕获准备的)：

element.addEventListener(event, function, useCapture)

第一个参数是需要绑定的事件

第二个参数是触发事件后要执行的函数

第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。
进一步了解冒泡和捕获

浏览器处理时间分为两个阶段，捕获阶段和冒泡阶段：
1. 先执行捕获阶段，如果事件是在捕获阶段执行的(true 情况)，则执行；
2. 然后是冒泡阶段，如果事件是在冒泡阶段执行的(false 情况)，则执行；
```
<div id="out">
    <div id="inner">
        <div id="center">center</div>
    </div>
</div>
<script>
    var center = document.getElementById('center');
    var inner = document.getElementById('inner');
    var out = document.getElementById('out');
    // center
    center.addEventListener('click', function () {
        console.log('center true')
    }, true)
    center.addEventListener('click', function () {
        console.log('center false')
    }, false)
    // inner
    inner.addEventListener('click', function (event) {
        // event.stopPropagation()
        console.log('inner true')
    }, true)
    inner.addEventListener('click', function () {
        console.log('inner false')
    }, false)
    // out
    out.addEventListener('click', function () {
        console.log('out true')
    }, true)
    out.addEventListener('click', function () {
        console.log('out false')
    }, false)
</script>
```
点击中心center，则输出
```
// out     true
// inner   true
// center  true
// center  false
// inner   false
// out     false
```
此时，根据浏览器事件机制先捕获后冒泡。发生center的捕获顺序是document -> html -> body -> out -> inner -> center 就捕获到了center，然后冒泡，冒泡顺序反之。

在假设点击inner，则输出
```
// out      true
// inner    true
// inner    false
// out      false
```
假设上面代码中的event.stopPropagation()生效执行，点击center时，事件在inner上捕获时停止了事件传播，但是不能阻止该节点上的捕获事件被调用，则输出的是
```
// out      true
// inner    true
```
event.stopPropagation() 该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一Document节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

总结：
1. 对于非target节点则先执行捕获在执行冒泡；
2. 对于target节点，捕获与冒泡事件的执行顺序取决于注册顺序；
3. 使用event.stopPropagation()将停止事件的传播。