js事件委托及其原理

1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。

也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。

好处呢:1,提高性能。

我们可以看一个例子:需要触发每个li来改变他们的背景颜色。

<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 = "";
    }
  }
}

这样我们就可以做到li上面添加鼠标事件。

但是如果说我们可能有很多个li用for循环的话就比较影响性能。

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

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");

/*
这里要用到事件源:event 对象,事件源,不管在哪个事件中,只要你操作的那个元素就是事件源。
ie:window.event.srcElement
标准下:event.target
nodeName:找到元素的标签名
*/
  oUl.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "red";
    }
  }
  oUl.onmouseout = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "";
    }
  }
}

好处2,新添加的元素还会有之前的事件。

我们还拿这个例子看,但是我们要做动态的添加li。点击button动态添加li

如:

<input type="button" id="btn" />
<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");
  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);
  }

}

这样做我们可以看到点击按钮新加的li上面没有鼠标移入事件来改变他们的背景颜色。

因为点击添加的时候for循环已经执行完毕。

那么我们用事件委托的方式来做。就是html不变

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
  var oBtn = document.getElementById("btn");
  var iNow = 4;

  oUl.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "red";
    }
  }
  oUl.onmouseout = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.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);
  }
}

ok:

如同在我们用微博中,新发微博照样有之前的鼠标事件。

js事件委托及其原理

时间: 2024-10-11 09:57:38

js事件委托及其原理的相关文章

js的事件的三个阶段,事件委托的原理

DOM2级事件规定的事件流的三个阶段:捕获,目标,冒泡(IE8以及更早版本不支持DOM事件流); 事件流: IE:IE事件流是事件冒泡流  Netscape事件流是事件捕获流 IE事件流 叫做事件冒泡,即事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收,然后逐级向上(一直到文档).事件捕获与事件冒泡事件流正好相反的顺序,事件捕获的事件流是最外层逐级向内传播. 使用DOM0级方法指定的事件处理程序被认为是元素的方法,处理程序是在元素的作用域进行的,程序中this是引用的是当前元素 btn

JS事件委托学习

JS 事件委托就是利用冒泡原理,把事件加到父级上触发,执行效果. 好处: 1.提高性能 2.新添加的元素还会有之前的事件 <ul id="ul">     <li>111111</li>     <li>22222</li>     <li>333333</li>     <li>444444</li></ul> 这样一个HTML结构 我想要给LI增加一个鼠标点击的效

JS——事件委托或代理

那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了,借花献佛,我摘过来,大家认真领会一下事件委托到底是一个什么原理: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收

0173 事件委托:原理、作用

事件冒泡本身的特性,会带来的坏处,也会带来的好处. 1.3.8.1 什么是事件委托 事件委托:也称为事件代理,在 jQuery 里面称为事件委派. 把事情委托给别人,代为处理. 说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行. 生活中的代理: js事件中的代理: 1.3.8.2 事件委托的原理 ? 给父元素注册事件,利用事件冒泡,当子元素的事件触发,会冒泡到父元素,然后去控制相应的子元素[利用事件冒泡影响每一个子节点]. 1.3.8.3 事件委托的作用 我们只操

[转载]JS事件委托(事件代理)的原理以及优缺点

1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也就是:利用冒泡的原理,把事件加到父级上,触发执行效果. 好处呢:1,提高性能. 我们可以看一个例子:需要触发每个li来改变他们的背景颜色. <ul id="ul"> <li>aaaaaaaa</li> <li>bbbbbbbb&l

jquery事件委托的原理和用途

事件委托 声明:这一篇文章只是阐述了委托事件的原理和用委托的好处还有就是在什么时候要委托合适.在这里用的是on()和off()而对于委托的其他方法(delegate().live()等)和各个方法的比较在这里并没有详细阐述,以后如果有机会在发一篇 1.什么是委托呢? a)定义:把一件事交给别人代做就叫做委托 b)问题:为什么要把事交给别人来做呢? 原因很简单:第一.自己不想做,所以交给别人 第二.自己不会做,所以交给别人来做 第三.让别人来做这一件事更有优势等等(这也是为什么要使用委托的原因)

js事件委托

1.普通事件绑定的弊端: 事件绑定只能绑已经存在的元素,对新增的元素无能为力,而且当元素非常多的时候,比如一个很大的表格的单元格, 每个单元格绑定一个事件很明显开销很大 2.事件委托意义: 解决矛盾是发展的源动力,事件委托就是专门解决这两个问题的,原理是事件捕获的冒泡捕获原理,单元格的事件可以 冒泡到其父元素(如表格,body)再进行捕获处理,减少了事件绑定的数量.新增的单元格事件同样也会冒泡到这些元 素上进行处理,一箭双雕,妙妙妙. 3.事件委托的实现: jquery.live()函数

JS事件委托机制简介

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

js事件委托(事件代理)

事件委托 js中事件冒泡我们知道,子元素身上的事件会冒泡到父元素身上,事件代理就是本来加载子元素身上的事件,加在其父元素身上,其问起产生了,那么多的子元素怎么区分事件本应该是哪个子元素的. 答案就是event对象记录的事件源,他就是发生事件的子元素: 事件委托的好处? 1.效率高,比如不用for循环 2.js新生成的子元素也不用新其添加事件,程序逻辑比较方便 例子1. 页面有个ul包含着4个li,鼠标移动到li上,li背景变成粉色,移出,背景恢复原色. <!DOCTYPE html> <