js的事件委托

什么是事件委托呢?

首先,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。举个例子,比如说送快递,如果一个快递员送一个公司的快递,他可以选择在公司联系每个人来取这个快递,当然另一种方法就是把快递让前台的MM代收,然后公司的人只要自己来前台取就ok了,虽然结果是一样的,但是效率却变快了许多。这里面可以把员工来取快递的行为看作是事件冒泡(什么是事件冒泡上篇文章有提)。

特别注意:

事件委托是通过事件冒泡实现的,所以如果子级的元素阻止了事件冒泡,那么事件委托也将失效!

举个简单的事件委托例子:

下面代码是一个普通的事件绑定

<ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li>
</ul>
window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");

  for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
      this.style.background = "red";
    }
    aLi[i].onmouseout = function(){
      this.style.background = "";
    }
  }
}

这样子我们可以通过for循环来遍历每一个li节点从而实现事件的绑定。但是有一个问题,上面代码只有三个dom界面,如果有需求需要的dom节点特别多,那么这就存在了性能的问题了。

下面我们可以用事件委托的方式来实现这样的效果:

oUl.onmouseover = function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "red";
    }
  }
  oUl.onmouseout = function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "";
    }
  }
}

我们通过event.target来实现事件委托,这里用到了事件源:event。什么是事件源呢?记住不管在那个事件中,只要你操作的那个元素就是事件源。

显而易见,这种方法就避免了for循环,从而提高了代码的性能,这也是事件委托的第一个好处:提高性能!

让我们再看一段代码:

下面的代码是如何操作后添加的dom元素

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
  var oBtn = document.getElementById("btn");
  var iNow = 4;
  for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
      this.style.background = "red";
    }
    aLi[i].onmouseout = function(){
      this.style.background = "";
    }
  }
  oBtn.onclick = function(){
    iNow ++;
    var oLi = document.createElement("li");
    oLi.innerHTML = 1111 *iNow;
    oUl.appendChild(oLi);
  }
}

这段代码用到了window.onload来实现事件的绑定,不过不用这个方法,那么事件肯定是失效。因为你绑定事件时根本就不存在这个dom元素,那么事件必然事件。

而事件委托就不会有这种问题。

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
  var oBtn = document.getElementById("btn");
  var iNow = 4;
  oUl.onmouseover = function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "red";
    }
  }
  oUl.onmouseout = function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "";
    }
  }
  oBtn.onclick = function(){
    iNow ++;
    var oLi = document.createElement("li");
    oLi.innerHTML = 1111 *iNow;
    oUl.appendChild(oLi);
  }
}
IE:window.event.srcElement标准下:event.target
nodeName:找到元素的标签名其实事件委托的核心不过是通过event.target(当前事件元素).nodeName(dom元素的标签名)取到标签,然后用event.target.style.xxx(例子中给的是background)来操作domwindow.event.srcElement是为了兼容ie下面是兼容浏览器写出的一个target事件
    var e = e || window.event;
    var target = e.target || e.srcElement;

这个如实事件委托的最核心,最有用的地方(个人认为),就是能够给后插入的dom节点绑定事件。一般我们用ajax调用接口返回的是一个大的json串,然后通过这个返回json动态插入数据(dom),这时候我们使用事件委托就不会出来事件绑定失效了。

jquery下的事件委托:

$(document).on(‘click‘,‘li‘,function(){
    alert(‘这是一个li!!!‘);
});

这就是一个事件委托。其实最开始的事件委托是封装的bind(),live()和delegate(),

首先我们先说bind()

$("ul li").bind("click", function(){
  alert(‘这是一个li!!!‘);
});

问题是,如果ul中要绑定1000个里,那么查找遍历1000个li会导致脚本运行速度很慢,而保存1000个li元素和事件处理程序也会占用大量的内存,所以这种方式我们不推荐。

下面我们来说第二种live()

$("ul li").live("click", function(){
  alert(‘这是一个li!!!‘);
});
live()事件委托可以解决上述两个问题。具体到代码上,只要用jQuery 1.3新增的.live()方法代替.bind()方法即可。
但是live也是有问题的。1.$()函数会找到当前页面中的所有li元素并创建jQuery对象,但在确认事件目标时却不用这个li元素集合,而是使用选择符表达式与event.target或其祖先元素进行比较,因而生成这个jQuery对象会造成不必要的开销。2.默认把事件绑定到$(document)元素,如果DOM嵌套结构很深,事件冒泡通过大量祖先元素会导致性能损失。
这些问题也是.live()方法饱受诟病的一个重要原因。为了解决上面两个方法带来的问题,jquery在1.4.2版本引入了一个新的delegate(),代码如下:


$("ul li").delegate("click", function(){
  alert(‘这是一个li!!!‘);
});

jquery 1.7为了解决.bind()、.live()和.delegate()并存造成的不一致性问题,将会增加一对新的事件方法:.on()所以现在我们用jquery都是用on绑定事件(也是我最开始写的事件委托的方式)。jquery规定on()中的第二个参数如果是dom元素,则为事件委托,否则为正常的事件绑定。最后:希望本文所述对大家的事件委托理解有所帮助!!!
 
 
时间: 2024-10-17 17:20:41

js的事件委托的相关文章

JS(原生)事件委托:为动态创建的节点绑定事件

项目开发中经常需要为动态创建的节点绑定事件, 比如需要创建一个动态列表:在li的数量非常少的时候,为每一个li绑定事件不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(假设),为每个li绑定事件就会对页面性能产生很大的影响.当有大量元素需要绑定相同事件的时候可采用事件委托,将在目标元素上要处理的事件委托给父元素或者祖先元素 优点    事件委托对于web应用程序的性能有如下几个优点:    1.需要管理的函数变少了    2.占用的内存少了    3.javascrip

JS:事件委托

事件委托 事件流 事件流描述的是从页面中接收事件的顺序.---JS高级程序设计(第3版) DOM Level 2 Events规定的事件流有三个阶段:①事件捕获阶段.②处于目标阶段.③事件冒泡阶段 事件委托 当需要添加的事件过多时,可以使用事件委托,而事件委托实际上利用了事件冒泡的特性. 使用事件委托还需了解事件对象(event):在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息. 在此仅需知道在DOM标准中,event拥有一个target属性表示事

js基础-事件委托

让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行! <!DOCTYPE html> <html> <head> <title>事件委托</title> </head> <body> <ul id="ul"> <li class="item">11</li> <li class="item">22<

js的事件委托机制

如今的JavaScript技术界里最火热的一项技术应该是'事件委托(event delegation)'了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父元素上.事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件.基本概念非常简单,但仍有很多人不理解事件委托的工作原理.这里我将要解释事件委托是如何工作的,并提供几个纯JavaScript的基本事件委托的例子. 假定我们有一个UL元素,它有几个子元素: <ul id="parent-l

JS 的事件委托机制

以前写上图所示的鼠标点击触发事件,一般都是用如下所示的给每一个表示列表的标签绑定一个click事件(演示用的例子的框架是React): 毫无疑问,这样是比较繁琐的,以后维护修改改个函数名什么的还不方便(当然sublime还是有ctrl+d的么= =),水平提高一点的写法如下: 但是,实际上还是为每一个要触发点击的标签绑定了一个click事件,这就导致了"事件处理程序过多". 在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能.导致这一问题的原因是多方

JS与Jquery的事件委托机制

传送:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 举个列子:有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).

js和jquery中的事件委托

[转+自己的修改] 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 举个列子:有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签

JS与Jquery的事件委托

参考:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 举个列子:有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).

JavaScript中事件委托(事件代理)详解

在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收. 事