首页 > 代码库 > js-addEventListener()第三个参数useCapture

js-addEventListener()第三个参数useCapture

2024-07-17 22:01:59   216人阅读

概述:

　　第3个参数叫做useCapture，是一個boolean值，就是true or false 。如果送出true的話就是瀏覽器會使用Capture方式，false的話是Bubbling，只有在特定狀況下才會有影響，通常建議是false，而會有影響的情形是目標元素(target element)有祖先元素(ancestor element)，而且也有同樣的事件對應函數

html片段

    <div id="div1" style="background: blue;width: 100px; height: 100px;">        <div id="div2" style="background: red;width: 70px; height: 70px;">            <div id="div3" style="background: yellow;width: 50px; height: 50px;"></div>        </div>    </div>

js代码

var oDvi1 = document.getElementById(‘div1‘),    oDvi2 = document.getElementById(‘div2‘),    oDvi3 = document.getElementById(‘div3‘);// 123 -> 456 -> 345oDvi1.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同理 


联系
我们