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'
    })
上一篇:Ant Design Vue


下一篇:JavaScript随笔6之定时器和DOM(对于文档的一些操作)