标签：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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。