（转）简述JS中事件委托/事件代理

最新推荐文章于 2024-02-24 09:51:02 发布

青椒切小块

最新推荐文章于 2024-02-24 09:51:02 发布

阅读量285

点赞数

分类专栏： js

原文链接：https://www.jianshu.com/p/a77d8928c5c9

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.什么是事件委托？

事件委托还有一个名字叫事件代理。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。==事件委托就是利用事件冒泡，只制定一个事件处理程序，可以管理某一类型的所有事件。==打个比方就是代收快递，公司前台代收A,B,C的快递，即使公司来了新员工（不管多少），前台都会核实后代收快递。

第一，现在委托前台的同事是可以代签收的，即程序中现有的dom节点是有事件的；
第二，新员工也是可以被前台代为签收的，即程序中新添加的dom节点也是有事件的

2.为什么要用事件委托？

在JavaScipt中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因

3.事件委托原理

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡？就是事件从最深处的节点开始，然后逐步向上传播事件。
举个例子：页面上有这么一个节点数div>ul>li>a;比如给里面的a加一个click事件，那个这个事件就会一层层的往外执行，执行顺序a>li>ul>div,有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul,li,a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托他们父级代为执行事件

例：实现功能是点击li,弹出123

<body>
    <ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
<script>
    window.onload = function () {
        var oU1 = document.getElementById("ul1");
        var aLi = oU1.getElementsByTagName("li");
        for (var i=0;i<aLi.length;i++){
            aLi[i].onclick = function () {
                alert(123);
            }
        }
    }
</script>
</body>

我们看看有多少次的dom操作，首先要找到ul，然后遍历li，然后点击li的时候，又要找一次目标的li的位置，才能执行最后的操作，每次点击都要找一次li；
子节点实现相同的功能：实现功能是点击li，弹出123

那么我们用事件委托的方式做又会怎么样呢？

window.onload = function () {
        var oU1 = document.getElementById("ul1");
        oU1.onclick = function () {
            alert(123);
        }
    }

这里用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发，当然，这里当点击ul的时候，也是会触发的.

4.事件冒泡及捕获

DOM2.0模型将事件处理流程分为三个阶段：
一、事件捕获阶段，
二、事件目标阶段，
三、事件起泡阶段。
如图：
在这里插入图片描述

事件捕获：当某个元素触发某个事件（如onclick）,顶层对象document就会发出一个事件流，随着dom树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。
事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
事件起泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理了函数，这些函数都会被触发。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来组织事件的冒泡传播。

5.事件委托优点

管理的函数变少了，不需要为每一个元素都添加监听函数。对于同一个父节点下面类似的子元素，可以通过委托给父元素的监听函数来处理事件。
可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定。
JavaScript和dom节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏发生的概率

6.常见问题

如果我想让事件代理的效果跟直接给节点的事件效果一样怎么办?

比如说只有点击li才会触发?

解决方案

Event对象提供了一个属性叫做target，可以返回事件的目标节点，我们称为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom。标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名。这样改下就只有点击li会触发事件了，并且每一次只执行一次dom操作

window.onload = function () {
        var oU1 = document.getElementById("ul1");
        oU1.onclick = function (ev) {
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            if (target.nodeName.toLowerCase() == 'li'){
                alert(123);
                alert(target.innerHTML);//弹出点击的li对应的内容
            }
        }
    }

编码实战

现在讲的都是document加载完成的现有的dom节点下的操作，那么如果是新增的节点，新增的节点会有事件吗？现在是移入li，li变红，移除li变白，这么一个效果，然后点击按钮，可以向ul中添加一个子节点

<body>
    <ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
    <button id="btn">添加li</button>
<script>
    window.onload = function () {
        var oU1 = document.getElementById("ul1");
        oU1.onclick = function (ev) {
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            if (target.nodeName.toLowerCase() == 'li'){
                alert(123);
                alert(target.innerHTML);
            }
        }
        //添加新节点
        var num = 5;
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function () {
            num++;
            var oLi = document.createElement('li');
            oLi.innerHTML = 111*num;
            oU1.appendChild(oLi);//可向节点的子节点列表的末尾添加新的子节点
        }
    }
</script>

在这里插入图片描述
我们可以发现，当用事件委托的时候，根本就不需要去遍历元素的子节点，只需要给父级元素添加事件就好了，其他的都是在js里面执行，这样可以大大减少dom操作，这才是事件委托的精髓所在。

什么样的事件可以用事件委托，什么样的事件不可以用呢？

适合用事件委托的事件：click，mousedown，mouseup，keydown,keyup,keypress。（所有用到按钮的事件，多数的鼠标事件和键盘事件）值得注意的是，mouseover和mouseout虽然也有事件冒泡，但是处理它们的时候需要特别注意，因为需要经常计算它们的位置，处理起来不太容易。不合适的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常的不好把控，在不如说focus，blur之类的，本身就没用冒泡的特性，自然就不能用事件委托了。

青椒切小块

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（转）简述JS中事件委托/事件代理

1.什么是事件委托？事件委托还有一个名字叫事件代理。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。==事件委托就是利用事件冒泡，只制定一个事件处理程序，可以管理某一类型的所有事件。==打个比方就是代收快递，公司前台代收A,B,C的快递，即使公司来了新员工（不管多少），前台都会核实后代收快递。第一，现在委托前台的同事是可以代签收的，即程序中现有的dom节点是有事件的；第二，新员工也是可以被前台代为签收的，即程序中新添加的dom节点也是有事件的
复制链接

扫一扫