js事件委托

  • 定义:通俗的讲,事件就是onclickonmouseoveronmouseout等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。
  • 原理:利用冒泡的原理,把事件加到父级上,触发执行效果。
  • 好处:1. 减少dom的遍历与dom操作,提高性能。2. 动态新添加的元素还会有之前的事件。
示例:鼠标放置到li上后改变当前li背景色
html:
  • aaaaaaaa
  • bbbbbbbb
  • cccccccc
不用事件委托:
window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");

  for(var i=0; i

利用遍历就可以做到li上面添加鼠标事件。
但是如果说我们可能有很多个li用for循环的话就比较影响性能。

使用事件委托:
window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");

/*
这里要用到事件源
*/
  oUl.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "red";
    }
  }
  oUl.onmouseout = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "";
    }
  }
}

这样,当鼠标在li上时,根据事件冒泡,由当前节点(当前li节点触发了ul的mouseover事件)自下而上触发事件,当节点对象是li时执行我们的操作。避免了dom遍历。
  此外,和事先遍历dom为每个li绑定事件不同,事件委托的方式是将事件绑定在ul上,所以在运行时动态添加的li上仍有效果。


术语解释:

  • 事件对象: 如上代码,当onmousemove事件发生时,就会产生一个事件对象,就是程序中的event对象
  • 获取事件对象var e = event || window.event;IE下是window.event,标准下是event
  • 事件源:事件源,在事件中,当前操作的那个元素就是事件源。
  • 获取事件源:IE:window.event.srcElement ,标准:event.target
  • target.nodeName:找到元素的标签名

*笔记整理自博客园

你可能感兴趣的:(js事件委托)