js事件委托

 js中的事件委托实际上是指利用事件冒泡机制，将子元素的事件加给（委托）父级元素或是更高级的元素来完成。

事件委托的好处主要有:

1、提高性能。提高性能主要反映为：将子元素多个事件处理转换为一个事件处理，使得占用内存减少，同时节约了处理所需时间。

<ul id="items">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

question：利用js使得鼠标指向li的时候，该元素背景变红，移开后回复正常

不使用事件委托：

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

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

使用事件委托：

window.onload = function(){
    var ul = document.getElementById("items");
    var lis = ul.getElementsByTagName("li");
      
    ul.onmouseover = function(evt){
            var evt = evt || window.event;
            var target = evt.target || evt.srcElement;
            if (target.nodeName.toLowerCase() == 'li') {
                target.style.background = "red";
            };
    }
    ul.onmouseout = function(evt){
            var evt = evt || window.event;
            var target = evt.target || evt.srcElement;
            if (target.nodeName.toLowerCase() == 'li') {
                target.style.background = "";
            };
    }
}

 

2、为新添加元素默认绑定事件。

具体在上述示例中新添加一个元素标签，并给其绑定一个事件从而添加一个新的li元素。并分别查看是否使用事件委托的新添加元素的效果。