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