javascript: addEventListener对事件冒泡和事件捕获的处理演示(chrome 108.0.5359.98)

一，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>

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/06/03/javascript-addeventlistener-dui-shi-jian-mao-pao-he-shi/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，测试效果

 

 全部冒泡时的console:

三，查看chrome浏览器的版本:

 

posted @ 2022-12-10 13:13  刘宏缔的架构森林  阅读(440)  评论(0)  编辑  收藏  举报