JavaScript事件委托与事件流+牛客例题

CaptainDrake

已于 2023-08-06 10:54:04 修改

阅读量152

点赞数

分类专栏： # JavaScript 文章标签：前端 javascript 开发语言

于 2023-08-06 10:40:21 首次发布

本文链接：https://blog.csdn.net/CaptainDrake/article/details/132128487

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

事件流：

概念：事件完整执行过程中的流动路径 Untitled

说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段

简单来说：捕获阶段是从父到子冒泡阶段是从子到父

注意：捕获基本不用，多用冒泡

捕获或者冒泡：

DOM.addEventListener(事件类型， 事件处理函数， 是否使用捕获机制)

addEventListener的第三个参数为true的时候，代表是在捕获阶段绑定，当第三个参数为false或者为空的时候，代表在冒泡阶段绑定。

阻止事件流动：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

事件对象.stopPropagation()

阻止默认行为：比如链接点击不跳转，表单域的不提交

e.preventDefault()

事件委托：

概念：事件委托是利用事件流的特征解决一些开发需求的知识技巧

e.target 指触发事件的元素

e.currentTarget 指绑定事件的元素

案例：

<body>
    <div id="a">
        <div id="b">
            <div id="c">
                <div id="d"></div>
            </div>
        </div>
    </div>
    
    <script>
        document.getElementById('a').addEventListener('click', function ( e ) {
            console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
        });
        document.getElementById('b').addEventListener('click', function ( e ) {
            console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
        });
        document.getElementById('c').addEventListener('click', function ( e ) {
            console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
        });
        document.getElementById('d').addEventListener('click', function ( e ) {
            console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
        });
    </script>
</body>

处于冒泡阶段

//点击d元素的时候；
target:d&currentTarget:d    // d触发
target:d&currentTarget:c    // c触发
target:d&currentTarget:b    // b触发
target:d&currentTarget:a    // a触发

理解：由输出可知，event.target指向引起触发事件的元素，而event.currentTarget则是事件绑定的元素，只有被点击的那个目标元素的event.target才会等于event.currentTarget。

将上述<script>标签里的事件绑定的第三个参数设置为true时，事件处于捕获阶段，然后还是点击最里层的元素d，这时event.target还依旧会指向d，因为那是引起事件触发的元素，因为event.currentTaget指向事件绑定的元素，所以在捕获阶段，最先来到的元素是a,然后是b,接着是c,最后是d。所以输出的内容如下：

处于捕获阶段

target:d&currentTarget:a    // a触发
target:d&currentTarget:b    // b触发
target:d&currentTarget:c    // c触发
target:d&currentTarget:d    // d触发

案例参考：currentTarget VS target - 掘金

搞懂之后刷道面试题吧！

事件委托_牛客题霸_牛客网

总结：

事件流：

事件完整执行过程中的流动路径，它主要有事件捕获和冒泡两个阶段，我们可以在addEventListener的第三个参数中设定是否采取事件冒泡或者捕获，默认或者填true为冒泡，false为捕获，其中冒泡更常用，它是指元素嵌套时，从子向父依次触发同名事件，而捕获则是从父向子触发。

事件委托原理是利用事件冒泡的特点，给父元素添加事件，子元素可以触发

事件捕获：

我们一般采用 e.target 与 e.currentTarget 来进行事件委托，其中前者指事件触发的元素，后者指事件绑定的元素。

CaptainDrake

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript事件委托与事件流+牛客例题

事件流：事件完整执行过程中的流动路径，它主要有事件捕获和冒泡两个阶段，我们可以在addEventListener的第三个参数中设定是否采取事件冒泡或者捕获，默认或者填true为冒泡，false为捕获，其中冒泡更常用，它是指元素嵌套时，从子向父依次触发同名事件，而捕获则是从父向子触发。事件捕获：我们一般采用 e.target 与 e.currentTarget 来进行事件委托，其中前者指事件触发的元素，后者指事件绑定的元素。
复制链接

扫一扫