事件代理

事件代理(事件委托)：利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果。

优点

1、提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用。

document.addEventListener("click",function(event){vartarget = event.target;if(target == item1){

alert("hello item1");

}elseif(target == item2){

alert("hello item2");

}elseif(target == item3){

alert("hello item3");

}

})

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间；如果使用事件代理，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能。
varitem1 =document.getElementById("item1");varitem2 =document.getElementById("item2");varitem3 =document.getElementById("item3");document.addEventListener("click",function(event){vartarget = event.target;if(target == item1){ alert("hello item1"); }elseif(target == item2){ alert("hello item2"); }elseif(target == item3){ alert("hello item3"); }})

原来需要的代码：

varitem1 =document.getElementById("item1");varitem2 =document.getElementById("item2");varitem3 =document.getElementById("item3");

item1.onclick =function(){

alert("hello item1");

}

item2.onclick =function(){

alert("hello item2");

}

item3.onclick =function(){

alert("hello item3");

}

2、动态的添加DOM元素，不需要因为元素的改动而修改事件绑定。

varlist =document.getElementById("list");document.addEventListener("click",function(event){vartarget = event.target;if(target.nodeName =="LI"){

alert(target.innerHTML);

}

})varnode=document.createElement("li");vartextnode=document.createTextNode("item4");

node.appendChild(textnode);

list.appendChild(node);

原来需要的代码

varlist =document.getElementById("list");varitem = list.getElementsByTagName("li");for(vari=0;i

(function(i){

item[i].onclick =function(){

alert(item[i].innerHTML);

}

})(i)

}varnode=document.createElement("li");vartextnode=document.createTextNode("item4");

node.appendChild(textnode);

list.appendChild(node);