JS事件委托学习

浏览数：38 / 时间：2015年06月09日

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

好处:

1.提高性能

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

这样一个HTML结构

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

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

oUl.onclick = function(){
alert(1123)
}

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

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

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

event对象有兼容想

IE ：window.event.srcElement;

标准： event.target;

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
   var oUl = document.getElementById("ul");
   var oLi = oUl.getElementsByTagName("li")
   var obtn = document.getElementById("input");
   var iNow =4;
   oUl.onmouseover = function(ev){
       var ev = ev || window.event; //事件源，不管在哪个事件中，只要你操作的那个元素就是事件源
       var target =  ev.targe || ev.srcElement;
       if(ev.target.nodeName.toLocaleLowerCase()=="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 = ""
   }

   obtn.onclick=function(){
      iNow++;
      var oLi = document.createElement("li");
      oLi.innerHTML = iNow * 11111;
      oUl.appendChild(oLi)
   }
}

</script>
</head>

<body>
<input type = "button"  value= "增加" id = "input" />
<ul id="ul">
     <li>111111</li>
     <li>22222</li>
     <li>333333</li>
     <li>444444</li>
  </ul>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JS事件委托学习