事件时序（事件冒泡、事件捕获触发问题），事件代理

最新推荐文章于 2022-04-17 23:49:34 发布

长脖子的鹿

最新推荐文章于 2022-04-17 23:49:34 发布

阅读量348

点赞数

本文链接：https://blog.csdn.net/weixin_43562354/article/details/99737810

版权

事件触发时序问题的术语：事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。
绑定事件方法的第三个参数（useCapture），就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡。
在这里插入图片描述
事件捕获：所有的经过的节点都会触发对应的事件；
事件冒泡：同样，所有经过的节点都会触发对应的事件。

一个完整的js事件，是从window开始，到window结束的过程;
1到5是捕获过程，6到10是冒泡过程

事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

<script>
    window.onload = function(){
        let div = document.getElementById('div');
        
        div.addEventListener('click',function(e){
            console.log(e.target)
        })
        
        let div3 = document.createElement('div');
        div3.setAttribute('class','div3')
        div3.innerHTML = 'div3';
        div.appendChild(div3)
    }
</script>


<body>
    <div id="div">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
    </div>
</body>

【1】可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件就非常棒
【2】可以实现当新增子对象时无需再次对其绑定（动态绑定事件）

长脖子的鹿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
事件时序（事件冒泡、事件捕获触发问题），事件代理

事件触发时序问题的术语：事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡。一个完整的js事件，是从window开始，到window结束的...
复制链接

扫一扫