【javascript】js事件委托

什么是事件委托？

事件就是指js中的onclick，onmouseout，onmousemove，等事件，委托就是自己的事件，让别人去做。也就是说利用js的事件冒泡的原理，父级委托自己的元素来完成事件，那有什么好处呢？。

好处一： 提高性能。

下面是一个例子：

有一下html代码，要求点击li的时候弹出其中的值。

<ul id="ul<span style="font-family: Arial, Helvetica, sans-serif;">"></span>
    <li>1</li>
    <li>2</li>
    <li>3</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].οnclick= function(){
      alert(this.innerHTML);
    }
  }
}

一般来说，作为一个前端工程师最能想到的就是这样写，但是这样利用循环难免肯定会影响性能的。请看下面这种事件委托的写法。

<pre name="code" class="javascript">window.onload = function(){
  var oUl = document.getElementById("ul");
  for(var i=0; i<aLi.length; i++){
    oUl.οnclick= function(ev){
      ev = ev || window.event;
      tar = ev.target || ev.srcElement;
      if(tar.nodeName.toUpperCase() == 'LI'<span style="font-family: Arial, Helvetica, sans-serif; line-height: 1.5em; color: rgb(51, 51, 51); white-space: pre-wrap;">){</span>
       alert(tar.innerHTML);
      }
    }
  }
}

好处二： 新添加的元素同样能够使用该方法。（学过jquery的知道jquery里面的live绑定事件）

同样上面的代码，我们利用js动态给ul添加一个li接点，它同样拥有该方法。