JS事件委托学习

时间：2014-09-15 17:32:19 阅读：274 评论：0 收藏：0 [点我收藏+]

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事件委托学习

原文：http://www.cnblogs.com/lmy-ms/p/3973166.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)