事件(五)：事件委托

时间 2019-11-18

标签事件委托繁體版

原文原文链接

什么是事件委托：html

高级程序设计里面：事件委托就是利用事件冒泡，只指定一个事件处理程序，就能够管理某一类型的全部事件node

通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来作，这个事件原本是加在某些元素上的，然而你却加到别人身上来作，完成这个事件。浏览器

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

优势：dom

1.不须要为每个元素都添加监听事件而是经过委托给父元素来处理。这样就减小了内存，性能提升了函数

2.能够方便动态添加元素。不须要再为新添加的元素从新绑定事件。性能

咱们能够看一个例子：须要触发每一个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用for循环的话就比较影响性能。this

下面咱们能够用事件委托的方式来实现这样的效果。html不变spa

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

    /*
    * 这里要用到事件源：event对象，事件源，无论在哪一个事件中，你操做的那个元素，就是事件源
    * ie:window.event.srcElement
    * 标准下：event.target
    * nodeName: 找到元素的标签名
    */
    oUl.onmouseover = function(event){
        debugger;
        var ev = event || window.event;
        var target = ev.target || ev.srcElement
        if(target.nodeName.toLowerCase() == 'li'){
            target.style.background = 'red';
        }
    }
    oUl.onmouseout = function(event){
        debugger;
        var ev = event || window.event;
        var target = ev.target || ev.srcElement;
        if(target.nodeName.toLowerCase() == 'li'){
            target.style.background = '';
        }
    }
}

咱们还拿这个例子看，可是咱们要作动态的添加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上面没有鼠标移入事件来改变他们的背景颜色

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);
  }
}

除了提升性能和节省内存的好处外，事件委托的另外一个好处在于，页面动态变化后，不须要从新检索元素和绑定事件

上面的例子是说li操做的是一样的效果，要是每一个li被点击的效果都不同，那么用事件委托还有用吗？

<div id="box">
        <input type="button" id="add" value="添加" />
        <input type="button" id="remove" value="删除" />
        <input type="button" id="move" value="移动" />
        <input type="button" id="select" value="选择" />
</div>

window.onload = function(){
     var Add = document.getElementById("add");
     var Remove = document.getElementById("remove");
     var Move = document.getElementById("move");
     var Select = document.getElementById("select");
            
     Add.onclick = function(){
          alert('添加');
     };
     Remove.onclick = function(){
         alert('删除');
     };
     Move.onclick = function(){
         alert('移动');
     };
     Select.onclick = function(){
         alert('选择');
     }
}

4个按钮，点击每个作不一样的操做，那么至少须要4次dom操做，若是用事件委托，能进行优化吗？

window.onload = function(){
     var oBox = document.getElementById("box");
     oBox.onclick = function (event) {
         var ev = event || window.event;
         var target = ev.target || ev.srcElement;
         if(target.nodeName.toLocaleLowerCase() == 'input'){
                switch(target.id){
                        case 'add' :
                            alert('添加');
                            break;
                        case 'remove' :
                            alert('删除');
                            break;
                        case 'move' :
                            alert('移动');
                            break;
                        case 'select' :
                            alert('选择');
                            break;
                }
         }
    } 
}

用事件委托就能够只用一次dom操做就能完成全部的效果，比上面的性能确定是要好一些的

因为事件处理程序能够为现代 Web 应用程序提供交互能力,所以许多开发人员会不分青红皂白地向页面中添加大量的处理程序

在 JavaScript 中,添加到页面上的事件处理程序数量将直接关系到页面的总体运行性能。致使这一问题的缘由是多方面的。首先,每一个函数都是对象,都会占用内存;内存中的对象越多,性能就越差。其次,必须事先指定全部事件处理程序而致使的 DOM 访问次数,会延迟整个页面的交互就绪时间

内存中留有那些过期不用的“空事件处理程序”(dangling event handler),也是形成 Web 应用程序内存与性能问题的主要缘由。

两种状况下,可能会形成上述问题

一、从文档中移除带有事件处理程序的元素时。这多是经过纯粹的 DOM 操做,例如使用 removeChild()和 replaceChild()方法

二、更多地是发生在使用 innerHTML 替换页面中某一部分的时候。若是带有事件处理程序的元素被 innerHTML 删除了,那么原来添加到元素中的事件处理程序极有可能没法被看成垃圾回收

<div id="myDiv">
    <input type="button" value="Click Me" id="myBtn">
</div>

<script>
   var btn = document.getElementById("myBtn");
   btn.onclick = function(){
       //先执行某些操做
       document.getElementById("myDiv").innerHTML = "Processing..."; //麻烦了!
   };
</script>

但问题在于,当按钮被从页面中移除时,它还带着一个事件处理程序呢。在元素上设置 innerHTML 能够把按钮移走,但事件处理程序仍然与按钮保持着引用关系。有的浏览器(尤为是 IE)在这种状况下不会做出恰当地处理,它们颇有可能会将对元素和对事件处理程序的引用都保存在内存中。若是你知道某个元素即将被移除,那么最好手工移除事件处理程序

<script>
   var btn = document.getElementById("myBtn");

    btn.onclick = function(){
        //先执行某些操做
        btn.onclick = null; //移除事件处理程序
        document.getElementById("myDiv").innerHTML = "Processing..."; //麻烦了!
    };
</script>

在此,咱们在设置div的 innerHTML 属性以前,先移除了按钮的事件处理程序。这样就确保了内存能够被再次利用,而从 DOM 中移除按钮也作到了干净利索。

致使“空事件处理程序”的另外一种状况,就是卸载页面的时候。绝不奇怪,IE8 及更早版本在这种状况下依然是问题最多的浏览器,尽管其余浏览器或多或少也有相似的问题。若是在页面被卸载以前没有清理干净事件处理程序,那它们就会滞留在内存中。每次加载完页面再卸载页面时(多是在两个页 19 面间来回切换,也能够是单击了“刷新”按钮),内存中滞留的对象数目就会增长,由于事件处理程序占用的内存并无被释放。通常来讲,最好的作法是在页面卸载以前,先经过 onunload 事件处理程序移除全部事件处理程序。在此,事件委托技术再次表现出它的优点——须要跟踪的事件处理程序越少,移除它们就越容易。对这种相似撤销的操做,咱们能够把它想象成:只要是经过 onload 事件处理程序添加的东西,最后都要通过 onunload 事件处理程序将它们移除。

总结：

那什么样的事件能够用事件委托，什么样的事件不能够用呢？

适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。

值得注意的是，mouseover和mouseout虽然也有事件冒泡，可是处理它们的时候须要特别的注意，由于须要常常计算它们的位置，处理起来不太容易。

不适合的就有不少了，举个例子，mousemove，每次都要计算它的位置，很是很差把控，在不如说focus，blur之类的，自己就没用冒泡的特性，天然就不能用事件委托了

委托缺点：

事件委托基于冒泡，对于不冒泡的事件不支持。
层级过多，冒泡过程当中，可能会被某层阻止掉。
理论上委托会致使浏览器频繁调用处理函数，虽然极可能不须要处理。因此建议就近委托，好比在table上代理td，而不是在document上代理td。
把全部事件都用代理就可能会出现事件误判。好比，在document中代理了全部button的click事件，另外的人在引用改js时，可能不知道，形成单击button触发了两个click事件。