事件委托好处:
1.提供性能。
2.添加元素仍然有以前的事件效果。
js片段
window.onload = init;
function init(){
var oUl =document.getElementById('ul');
var oInput = document.getElementById('input');
var iNow =4;
oInput.onclick = function(){
iNow++;
var oLi = document.createElement('li');
oLi.innerHTML = ""+iNow+"";
oUl.appendChild(oLi);
}
oUl.onmouseover=function(ev){
var ev = ev || window.event;
var target =ev.srcElement||ev.target;
if(target.nodeName.toLocaleLowerCase()=="li"){
target.style.backgroundColor="red";
}
}
oUl.onmouseout=function(ev){
var ev = ev || window.event;
var target =ev.srcElement||ev.target;
if(target.nodeName.toLocaleLowerCase()=="li"){
target.style.backgroundColor="";
}
}
}
html片段
<input id="input" type="button" value="点击" />
<p>1.提高性能</p>
<p>2.新添加的元素还会有以前的事件例如微博应用</p>
<ul id="ul">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>