什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。
好处呢：1，提高性能。
我们可以看一个例子：需要触发每个li来改变他们的背景颜色。
<body>
<ul id="number">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<input type="button" value="add" id="add" />
</body>
<script>
window.onload=function(){
var ul=document.getElementById("number");
var li=ul.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
li[i].onmouseover=function(){
this.style.background="red";
}
li[i].onmouseout=function(){
this.style.background="white";
}
};
}
</script>
这样我们就可以做到li上面添加鼠标事件。
但是如果说我们可能有很多个li用for循环的话就比较影响性能。
下面我们可以用事件委托的方式来实现这样的效果。html不变
<script>
window.onload=function(){
var ul=document.getElementById("number");
var li=ul.getElementsByTagName("li");
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="white";
}
}
}
</script>
好处2，新添加的元素还会有之前的事件。
我们还拿这个例子看，但是我们要做动态的添加li。点击button动态添加li，这样做我们可以看到点击按钮新加的li上面没有鼠标移入事件来改变他们的背景颜色。
因为点击添加的时候for循环已经执行完毕。
那么我们用事件委托的方式来做。就是html不变
<script>
window.onload=function(){
var ul=document.getElementById("number");
var li=ul.getElementsByTagName("li");
var add=document.getElementById("add");
add.onclick=function(){
var li=document.createElement("li");
li.innerHTML="z";
ul.appendChild(li);
}
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="white";
}
}
}
</script>
ok：
如同在我们用微博中，新发微博照样有之前的鼠标事件。
原文地址：http://www.tuicool.com/articles/jQZj6zB
时间： 2024-08-05 01:50:01