js事件委托

js中的事件委托实际上是指利用事件冒泡机制，将子元素的事件加给（委托）父级元素或是更高级的元素来完成。

事件委托的好处主要有:

1、提高性能。提高性能主要反映为：将子元素多个事件处理转换为一个事件处理，使得占用内存减少，同时节约了处理所需时间。

<ul id="items">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

question：利用js使得鼠标指向li的时候，该元素背景变红，移开后回复正常

不使用事件委托：

window.onload = function(){
　　var ul = document.getElementById("items");
　var lis = ul.getElementsByTagName("li");

　for(var i=0; i<lis.length; i++){
　　lis[i].onmouseover = function(){
　　　this.style.background = "red";
　　}
　　lis[i].onmouseout = function(){
　　　this.style.background = "";
　　}
　}
}

使用事件委托：

window.onload = function(){
var ul = document.getElementById("items");
var lis = ul.getElementsByTagName("li");

ul.onmouseover = function(evt){
var evt = evt || window.event;
var target = evt.target || evt.srcElement;
if (target.nodeName.toLowerCase() == 'li') {
target.style.background = "red";
};
}
ul.onmouseout = function(evt){
var evt = evt || window.event;
var target = evt.target || evt.srcElement;
if (target.nodeName.toLowerCase() == 'li') {
target.style.background = "";
};
}
}

View Code

2、为新添加元素默认绑定事件。

具体在上述示例中新添加一个元素标签，并给其绑定一个事件从而添加一个新的li元素。并分别查看是否使用事件委托的新添加元素的效果。