事件委托

 1:什么是事件委托

利用冒泡的原理,把事件加到父级上,触发执行效果。

2:事件委托的好处

(1)提高性能;(2)新添加的元素,还会有之前的事件;

例子:

<script>
window.onload=function(){
var Ul=document.getElementById("ul");
var oLi=Ul.getElementsByTagName("li");
var add=document.getElementById("add");
var iNow=4;
Ul.onmouseover=function(ev){
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=="li")
{
 target.style.background='red';
}
}
Ul.onmouseout=function(ev){
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=="li")
{
 target.style.background='';
}
}
add.onclick=function(){
iNow++;
var  iLi=document.createElement("li");
iLi.innerHTML=888*iNow;
Ul.appendChild(iLi);
}
}
</script>
<body>
<input  id="add" value="添加" type="button"/>
<ul id="ul">
  <li>1111</li>
  <li>2222</li>
  <li>3333</li>
  <li>44444</li>
</ul>
</body>

posted on 2012-05-25 22:22  仙梦之飘  阅读(289)  评论(0编辑  收藏  举报