js事件委托

事件委托一般替换于多次遍历某个属性进行某些操作

例如给多个li添加点击事件

如果用for来遍历给每个li来绑定事件的话，会有两个缺陷，1.点击的时候不能准确的拿到index的值； 2.新添加的li元素不能被绑定上点击事件，这时我们需要借助事件委托(也称为事件代理)

他可以帮我们给最新添加的子元素绑定上监听事件，利用的原理就是冒泡，事件绑定给父元素，利用event的target方法来确定目标元素，也就是子元素，然后进行相应的操作，注意这里不能用currentTarget，目标元素的有区别的

下面代码说明：

普通的遍历li

window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert(123);
        }
    }
}




事件委托（事件绑定给父元素）
window.onload = function(){
    var oUl = document.getElementById("ul1");
   oUl.onclick = function(){
        alert(123);
    }
}

 

 总结：

那什么样的事件可以用事件委托，什么样的事件不可以用呢？

适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。

值得注意的是，mouseover和mouseout虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。

不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，不好计算，比如说在focus，blur之类的，本身就没用冒泡的特性，自然就不能用事件委托了。