js-addEventListener()第三个参数useCapture

acoolgiser

发布于 2020-11-03 10:47:59

9000

发布于 2020-11-03 10:47:59

文章被收录于专栏：acoolgiser_zhuanlan acoolgiser_zhuanlanacoolgiser_zhuanlan

js-addEventListener()第三个参数useCapture

概述:

第3个参数叫做useCapture，是一个boolean值，就是true or false 。如果送出true的话就是浏览器会使用Capture方式，false的话是Bubbling，只有在特定状况下才会有影响，通常建议是false，而会有影响的情形是目标元素(target element)有祖先元素(ancestor element)，而且也有同样的事件对应函数

html片段

    < div id =“ div1” style =“背景：蓝色；宽度：100px；高度：100px;” > 
        < div id =“ div2” style =“ background：red; width：70px; height：70px;” > 
            < div id =“ div3” style =“背景：黄色；宽度：50像素；高度：50像素；” > </ div > 
        </ div > 
    </ div >

js代码

var oDvi1 = document.getElementById（'div1' ），
    oDvi2 = document.getElementById（'div2' ），
    oDvi3 = document.getElementById（'div3' ）;


// 
123- > 456- > 345 oDvi1.addEventListener（'click'，xx1，true ）;
oDvi2.addEventListener（ 'click'，xx2，false ）;
oDvi3.addEventListener（ 'click'，xx3，true ）;


function xx1(){ //蓝
    alert(123);
}

function xx2(){ //红
    alert(345);
}

function xx3(){//黄
    alert(456);
}

总结:

在div3上触发点击事件

捕获阶段: 外-》里 * 在div1处检测 useCapture 是否为true,是则执行程序， div2同理 .

目标阶段: 目标到div3处，发现div3就是鼠标点击的节点，所以这里是目标阶段。若有事件处理程序，则执行该程序，这里不论 useCapture 为 true 还是 false。

冒泡阶段: 里-》外在div2处检测useCapture 是否为false，是则执行该程序 . div1同理

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-11-02 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html