JS事件委托学习（转）

JS 事件委托就是利用冒泡原理，把事件加到父级上触发，执行效果。

好处:

1.提高性能

2.新添加的元素还会有之前的事件

 

 

<</</</</li>
</ul>

 

这样一个HTML结构

  我想要给LI增加一个鼠标点击的效果通常写法

 

window.onload ; i )
      }
   }
}

 

如果事件委托呢，我会把时间委托给ul  就把for 循环直接改

 

oUl.onclick )
}

 

接下来我们想写过一个，给LI加一个鼠标经过的效果 默认我肯定会这样写：

 

window.onload ; i <oLi.length; i++){
      oLi[i].onmouseover = function(){
         this.style.background = "red"
      }

oLi[i].onmouseout = function(){
         this.style.background = ""
      }
   }
}

 

如果我用事件委托的写法:

 

event对象，事件源，无论你操作等你个对象的事件

 

event对象有兼容想

 

 IE  ：window.event.srcElement;

标准  ： event.target;

 

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

oUl.onmouseover = function(ev){
       var ev = ev || window.event; //事件
       var target =  ev.targe || ev.srcElement; //事件源，不管在哪个事件中，只要你操作的那个元素就是事件源
       if(ev.target.nodeName.toLocaleLowerCase()=="li"){   // 事件在LI 上面才执行增加背景颜色
          ev.target.style.background = "red"
       }

}
   oUl.onmouseout = function(ev){
       var ev = ev || window.event;
       var target =  ev.targe || ev.srcElement;
       ev.target.style.background = ""
   }

}

 

新增加元素还会有原来的事件总代码

 

<!;
   oUl.;
      oUl.appendChild(oLi)
   }
}

</</</</</li>
  </ul>
</body>
</html>