js事件委托

js事件委托 经典面试题

事件委托的概念:

事件委托就是把A的事交给B去干,在js中事件委托也称为事件代理,事件委托就是利用冒泡事件,只把事情交给一个去做,就可以管理一种类型的所有事件,如果子元素拦截了冒泡,那么事件委托也无法实现

事件委托的好处:

提高性能

事件委托的案例:

使用事件委托实现移入加背景,移出背景消失

<<< html

 <ul id="ul">
 <li>aaaaaaaa</li>
 <li>bbbbbbbb</li>
 <li>cccccccc</li>
 </ul>

<<< js

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