js事件委托总结

栏目: JavaScript · 发布时间: 5年前

内容简介:补充一直没写的总结:eyes:当简单回顾咯DOM事件流包括三个阶段:事件捕获阶段,处于目标阶段与事件冒泡阶段

补充一直没写的总结:eyes:当简单回顾咯

DOM事件流

DOM事件流包括三个阶段:事件捕获阶段,处于目标阶段与事件冒泡阶段

js事件委托总结

即比如点击td元素时,由外至内层会经历捕获阶段,目标阶段,冒泡阶段三个阶段,相应地会触发路径元素上的事件

此外,addEventListener(type, listener[, useCapture])函数默认设置在冒泡阶段,路径元素的事件才会触发,此参数为可选值,默认值为false,示例代码一并标出

示例代码:

<div id="grandFather" style="width: 700px;height: 700px; background-color: red">
        <p>grandFather</p>
        <div id="father1" style="width: 300px; height: 300px; background-color: pink">
            <p>father1</p>
            <div id="son1" style="width: 100px; height: 100px; background-color: yellow">
                <p>son1</p>
            </div>
        </div>
        <div id="father2" style="width: 300px;height: 300px; background-color: green">
            <p>father2</p>
        </div>
    </div>
    <script type="text/javascript">
        let grandFather = document.getElementById('grandFather'),
            father1 = document.getElementById('father1'),
            son1 = document.getElementById('son1'),
            father2 = document.getElementById('father2');
        
        grandFather.addEventListener('click', function(event){console.log('I am grandFather')},true);
        father1.addEventListener('click', function(event){console.log('I am father1')},false);
        son1.addEventListener('click', function(event){console.log('I am son1')},false);
        father2.addEventListener('click', function(event){console.log('I am father2')},false);
    </script>

点击son1 div时,会冒泡触发father1与grandFather事件

js事件委托总结

若将grandFather的use capture参数改为true,则会相应改变执行顺序

grandFather.addEventListener('click', function(event){console.log('I am grandFather')},true);

js事件委托总结

以上是事件流的简单总结,下面事件委托是对事件冒泡的应用

事件委托

如果在需要有多个DOM事件需要监听的情况下(比如几百条微博点击事件注册),给每一个DOM都绑定监听函数,对性能会有极大的影响,因此,有一解决方案为事件委托。

事件委托利用了 事件冒泡event.target

event.currentTarget与event.target

currentTarget:表示此事件绑定的元素

target:通俗理解为表示触发一系列事件的源头

我们再次修改grandFather的监听函数

grandFather.addEventListener('click', function(event){
    console.log('I am grandFather!!!')
    console.log('currentTarget:');
    console.log(event.currentTarget); 
    console.log('target:');
    console.log(event.target);},false); //这里已改回false

再次点击son1,进入grandFather的监听函数后显示如下

js事件委托总结

事件委托具体步骤

了解冒泡与target后,不难可以想到若是在几百个dom监听之中,只需把监听函数绑定在父容器上即可,这里依旧拿这个简单的例子修改,我们要做的是点击某个div便显示打印'I am xxx'

首先,给div都绑定自定义的 data-name 属性

<!-- 没有给p元素设置data-name,点击p元素时会显示data-name为null -->
    <div id="grandFather" data-name="grandFather" style="width: 700px;height: 700px; background-color: red">
        <p>grandFather</p>
        <div id="father1" data-name="father1" style="width: 300px; height: 300px; background-color: pink">
            <p>father1</p>
            <div id="son1" data-name="son1" style="width: 100px; height: 100px; background-color: yellow">
                <p>son1</p>
            </div>
        </div>
        <div id="father2" data-name="father2" style="width: 300px;height: 300px; background-color: green">
            <p>father2</p>
        </div>
    </div>

接着改写grandFather的监听函数

grandFather.addEventListener('click', function(event){
            console.log('I am ' + event.target.getAttribute('data-name'));
        },false);
        //这些可以注释掉了!
        // father1.addEventListener('click', function(event){console.log('I am father1')},false);
        // son1.addEventListener('click', function(event){console.log('I am son1')},false);
        // father2.addEventListener('click', function(event){console.log('I am father2')},false);

这样子就是一个简单的委托,更多的应用可以结合switch等等

参考资料


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

心理学与生活

心理学与生活

[美] 理查德·格里格、菲利普·津巴多 / 王垒、王甦 等 / 人民邮电出版社 / 2003-10 / 88.00元

《心理学与生活》是美国斯坦福大学多年来使用的教材,也是在美国许多大学里推广使用的经典教材,被ETS推荐为GRE心理学专项考试的主要参考用书,还是被许多国家大学的“普通心理学”课程选用的教材。这本教科书写作流畅,通俗易懂,深入生活,把心理学理论与知识联系人们的日常生活与工作,使它同样也成为一般大众了解心理学与自己的极好读物。 作为一本包含着丰富的教育思想和独特教学方法的成熟教材,原书中所有元素......一起来看看 《心理学与生活》 这本书的介绍吧!

html转js在线工具
html转js在线工具

html转js在线工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具