js/jq——事件委托

版权声明：转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82077935

事件委托好处：
1，性能好
2，新添加的元素还会有之前的事件

js事件委托

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

/*
event：事件源，在哪个事件中，操作的那个元素就是事件源
ie浏览器：window.event.srcElement
标准下:event.target
nodeName:找到元素的标签名
*/
  Ul.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLowerCase() == "li"){
    target.style.height = "100px";
    }
  }
  Ul.onmouseout = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLowerCase() == "li"){
    target.style.height = "200px";
    }
  }
}

关于更多event事件源，参见：https://blog.csdn.net/lucky541788/article/details/81809283

jq事件委托

$("#ulBox").on('click','li',function(){  
      console.log($(this).attr("class"));
 })