DOM事件响应链——捕获阶段、目标阶段、冒泡阶段

码龄5年

关注

原创 2023-11-09 20:34:09 315 阅读 GEO检测

基于卷积神经网络的人脸表情识别(JAFFE篇) 1.win10/11操作系统2.python3.7以上3.tensorflow2.4以上版本（2.0其它版本需要微调）4.内存12G，显卡4G以上（没有独显倒是也能跑...）（这个可爱的妹子就是JAFFE数据集中的图片）阅读详情

一、DOM事件响应链

事件响应链分为三个阶段：捕获阶段、目标阶段、冒泡阶段。

<div class="fa">
    <div class="son">
        <button>按钮</button>
    </div>
</div>
<script>
    let fa = document.querySelector('.fa')
    let son = document.querySelector('.son')
    let btn = document.querySelector('.son button')
    fa.addEventListener('click',()=>{
        console.log('fa被点了')
    })
    son.addEventListener('click',()=>{
        console.log('son被点了')
    })
    btn.addEventListener('click',()=>{
        console.log('button被点了')
    })
</script>

当我们点击按钮之后，事件处理函数执行，打印结果，但可以发现，外面两层的div的事件也执行了，且顺序是在button之后。div的事件会执行是因为button是他们的后代元素，点击button其实相当于也点了他们，但打印顺序就是因为事件响应链的关系。

事件响应链

由图可以看出，当事件触发后，会先来到document对象，看其有没有绑定事件，有的话放在一边，然后到HTML，看有没有事件，然后是body，根据DOM树的层级往下走，这是捕获阶段。当来到我们点击的对象时，就不再往下走，同时执行这个对象的事件处理函数，这是目标阶段。执行之后就往上走，也就是先前的步骤倒退。找到目标元素的父元素，有绑定事件就执行处理函数，然后再往上，遇到事件就执行，这是冒泡阶段。

二、设置事件执行阶段

事件默认在冒泡阶段执行。所以点击button执行函数后，执行了son的事件处理函数，最后执行了fa的事件处理函数。

addEventListener有三个参数，第一个为事件类型，第二个为事件处理函数，第三个为布尔值。默认false，表示在冒泡阶段触发。

当fa的绑定事件的第三个参数设为true后，就是在捕获阶段触发。所以再次点击button，先执行了fa的事件处理函数，然后是目标button和冒泡阶段的son。