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'
    })

标签：DOM,标签,传播,阻止,事件,机制,过程,挖洞,冒泡
来源： https://www.cnblogs.com/moonof/p/15934045.html