事件委托

zombieda 发布于2019-08-22 10:53 / 3202人阅读

摘要：那么我们用事件委托的方式做从上面我们可以看出我们只给父级一个事件，那么我们在划过每一个的时候，每次只执行一次操作。

事件委托（事件代理） 概述

事件委托就是利用事件冒泡，指定一个事件处理程序，就可以管理某一类的事件

时间委托的好处

1、节省内存开销

2、追加节点同样有效

为什么要用事件委托

一般来说，dom需要事件处理，我们直接给他设事件处理就好了，但是如果多了dom的话，我们就需要设多个事件，这样大大的增加了内存的开销。比如我们有1000个li，每一个都加一个click事件，那么我们就增加了1000个内存空间，如果使10000个，100000个的话，可想而知我们将要开辟10000个,100000个乃至跟多，所以我们如果用事件委托，只对他的父级进行一个dom操作的话，我们只需要开辟一块内存空间就ok。

事件委托怎么实现

在做事件委托之前我们先做个一般的方法的例子

子节点实现相同的功能：

实现功能是划过变色

var lis = document.getElementsByTagName("li")
for(var i=0,l=lis.length;i
上面代码的意思很简单，首先要找到ul，然后遍历li，然后划过那个li的时候，又要找一次li的位置，每次划过都要找。如果我们自动追li的时候，每追加一次我们就得写一次for，我们将消耗太多的内存。
那么我们用事件委托的方式做
window.onload = function(){
    var oUl = document.getElementById("ul1");
   oUl.onmousemove= function(ev){
        var oEvent = ev || window.event;
　　　　var target = oEvent.target || oEvent.srcElement;
　　　　target.className="light";
    }
   oUl.onmouseout = function(ev){
        var oEvent = ev || window.event;
　　　　var target = oEvent.target || oEvent.srcElement;
　　　　target.className="";
    }
}
从上面我们可以看出我们只给li父级一个事件，那么我们在划过每一个li的时候，每次只执行一次dom操作。

GPU云服务器云服务器委托事件事件委托事件委托c javascript事件委托

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91398.html

jQuery源码解析之你并不真的懂事件委托及target和currenttarget的区别

摘要：源码源码行被点击了点击了，即委托的事件被点击了优先添加委托，再添加其他即委托在上的事件数量在下标为的位置插入委托事件解析可以看到，是优先添加委托事件，再添加自身事件，触发事件的时候也是按这个顺序。 showImg(https://segmentfault.com/img/remote/1460000019419722); 前言：请先回顾下我之前写的一篇文章：JavaScript之事件委...

khs1994 2019-08-23 18:01 评论0 收藏0
简单说 JavaScript中的事件委托（上）

摘要：说明这篇文章说中的事件委托，这次先说一些比较基本的知识。第一段绑定了两次事件，第二段绑定了一次事件也就是说，原来在上绑定的事件，现在委托在了父元素上，而在上只需要绑定一次就可以了。我们用事件委托的方式，再来改改。说明这篇文章说JavaScript中的事件委托，这次先说一些比较基本的知识。事件委托是什么先来看看事件委托的概念事件委托就是利用事件冒泡，只指定一个事件处理程序，就...

fireflow 2019-08-29 14:07 评论0 收藏0
简单说 JavaScript中的事件委托（上）

摘要：说明这篇文章说中的事件委托，这次先说一些比较基本的知识。第一段绑定了两次事件，第二段绑定了一次事件也就是说，原来在上绑定的事件，现在委托在了父元素上，而在上只需要绑定一次就可以了。我们用事件委托的方式，再来改改。说明这篇文章说JavaScript中的事件委托，这次先说一些比较基本的知识。事件委托是什么先来看看事件委托的概念事件委托就是利用事件冒泡，只指定一个事件处理程序，就...

SexySix 2019-08-21 18:29 评论0 收藏0
好文推荐：javascript: 事件委托解析

摘要：前言之前不太明白事件委托。看了这个帖子，跟着代码操作了一遍，终于明白了事件委托。推荐理由一步一步，渐进式分析来说明事件委托。为签收快递，有两种办法一是三个人在公司门口等快递二是委托给前台代为签收。前言：之前不太明白事件委托。看了这个帖子，跟着代码操作了一遍，终于明白了事件委托。所以转载。推荐理由：一步一步，渐进式分析来说明事件委托。什么叫事件委托呢？它还有一个名字叫事件代理 ...

Wuv1Up 2019-08-21 17:35 评论0 收藏0