DOM的事件传播机制

在dom传播的过程中，一个事件有触发到响应，经历了三个过程：

1，目标的挖洞过程，先有html标签触发事件，然后向子标签一层一层传播，但未执行，，直到找到事件目标为止，这个过程叫做挖洞过程，

2，目标阶段，即获取目标阶段。

3，冒泡阶段，事件目标响应事件，并调用事件函数，然后一层一层向父标签传递事件响应，直到html根标签结束为止。这个过程叫冒泡过程。

事件函数是在冒泡过程中调用的，可以通过addeventlistener设置第三个参数为true，改为挖洞过程调用。

 

对于事件传播流程中的标签来说，挖洞总是在冒泡之前执行，对于最底层的事件目标也是如此，但火狐不这么认为，在火狐中，对于事件目标，挖洞函数和冒泡函数谁先绑定谁先执行。

    var a = document.querySelector('a')

    // 需求，div中有一个a标签，点击div背景变蓝，点击a背景变红

    a.addEventListener('click', function (e) {

        e.preventDefault()    // 阻止默认行为

        body.style.backgroundColor = 'red'

        // 阻止a标签的事件传播         不会阻止a自身的冒泡

        // e.stopPropagation()

        // 阻止a标签的事件传播，会把自身的冒泡阻止

        e.stopImmediatePropagation()

    }, true)                                   // 阻止冒泡是在挖洞过程进行的

    div.addEventListener('click', function () {

        body.style.backgroundColor = 'blue'

    })