javascript: addEventListener對事件冒泡和事件捕獲的處理演示(chrome 108.0.5359.98)

阿新 • • 發佈：2022-12-10

一，js程式碼

<html>
<head>
    <meta charset="utf-8"/>
    <title>測試</title>
</head>
<body style="padding:0px;margin: 0px;">
<button id="btn">點選</button>
    <button id="removeBtn" onclick="removeBtnClick()">取消左側按鈕的點選功能</button>

<div id="wrapper" 
 style="width:200px;height: 200px;background: #ffff00;" >
    <div id="box" 
       style="width:100px;height: 100px;background: #ff0000;position: absolute;top:70px;left:40px;" >
    </div>
</div>

<button onclick="allBubble()">全部冒泡</button><br/>
<button onclick="allCapture()"> 
全部捕獲</button><br/>
<button onclick="onlyWrapperBubble()">僅wrapper冒泡</button><br/>
<button onclick="onlyWrapperCapture()">僅wrapper捕獲</button><br/>
    <script>
/*
addEventListener()方法的優點:
允許您向同一元素新增許多事件，而不會覆蓋現有事件
*/

//第一個onload,會被第二個覆蓋
window.onload = function 
() {
     console.log("onload1");
}

//第二個onload,會覆蓋第一個
window.onload = function() {
     console.log("onload2");
}

//第一個onload,不會被覆蓋
window.addEventListener('load' ,function(){
     console.log("load完成，第一次彈出");
})

//第二個onload,不會被覆蓋
window.addEventListener('load' , function(){
     console.log("load完成，第二次彈出");
})


//按鈕被點選
function btnClick() {
    alert("第一次點選button");
}

//移除按鈕的點選事件
function removeBtnClick() {
     document.getElementById('btn').removeEventListener('click' ,btnClick,true);
}

//按鈕新增點選事件
document.getElementById('btn').addEventListener('click' ,btnClick,true);


const wrapper = document.getElementById('wrapper');
const box = document.getElementById('box');
//第三引數: useCapture 
//預設值為false，將使用冒泡傳播
//當值設定為true時，事件使用捕獲傳播

//box被點選
function boxClick() {
    console.log('box被點選');
}

//wrapper被點選
function wrapperClick() {
    console.log('wrapper被點選');
}

//window被點選
function windowClick() {
    console.log('window被點選');
}

//清除所有事件
function clearEvent() {
      box.removeEventListener('click', boxClick, true);
      box.removeEventListener('click', boxClick, false);

      wrapper.removeEventListener('click', wrapperClick, true);
      wrapper.removeEventListener('click', wrapperClick, false);

      window.removeEventListener('click', windowClick, true);
      window.removeEventListener('click', windowClick, false);
}

/*
 全部用冒泡傳播
*/
function allBubble() {
    clearEvent();

    box.addEventListener('click', boxClick, false);
    wrapper.addEventListener('click', wrapperClick, false);
    window.addEventListener('click', windowClick, false);
}

/*
 全部用捕獲傳播
*/
function allCapture() {
    clearEvent();

    box.addEventListener('click', boxClick, true);
    wrapper.addEventListener('click', wrapperClick, true);
    window.addEventListener('click', windowClick, true);
}

/*
 //捕獲的會被先處理，冒泡的最後處理
 //此處僅wraper使用冒泡傳播
*/

function onlyWrapperBubble() {
    clearEvent();

    box.addEventListener('click', boxClick, true);
    wrapper.addEventListener('click', wrapperClick, false);
    window.addEventListener('click', windowClick, true);
}

/*
 //捕獲的會被先處理，冒泡的最後處理
 //此處僅wraper使用捕獲傳播
*/

function onlyWrapperCapture() {
    clearEvent();

    box.addEventListener('click', boxClick, false);
    wrapper.addEventListener('click', wrapperClick, true);
    window.addEventListener('click', windowClick, false);
}
    </script>
</body>
</html>