javaScript-事件委托

前面写过on和addEventListener的区别，用法我就不在这里面讲了，主要看一下什么是事件委托。

事件委托：又叫做事件代理，是利用冒泡机制，把事件绑定在父元素上，然后触发。

优点：
1.只指定一个事件处理程序，就可以管理某一类型的所有事件；
2.提高事件处理速度，减少内存的占用；
3.不需要因为动态加DOM,修改事件绑定。即可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

前面文章已经提过了，普通的on+事件，如果绑定多个相同的事件，只会执行一次，后面会覆盖前面的，而addEventListener可以支持为同一个DOM元素注册多个同类型事件。

下面我们看一下如何实现事件委托。

事件委托的关键在于利用事件冒泡机制。

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
</ul>
 <div id="btn">增加按钮</div>
<script>
var Ul= document.getElementsByTagName("ul");
var lis = Ul[0].getElementsByTagName("li");
var Btn = document.querySelector("#btn");

var len = lis.length+1;
Btn.onclick = function(){
        var eleLi = document.createElement("li");
        eleLi.innerText = len++;
        Ul[0].appendChild(eleLi);
}
Ul[0].addEventListener("click",function(ev,target){
     var ev = event||window.event;
     var target = ev.target||ev.srcElement;
     if(target.tagName.toLowerCase()=='li'){
         alert(target.innerText);
     }
})

上面例子可以看出，但我们在ul里面新增li，这里就不用再重新为li绑定事件了。

这里还涉及到一个小知识点：
事件源：traget.表示当前的事件操作的dom
IE：window.event.srcElement
标准：event.target

做了一个小兼容

var ev = event||window.event;
var target = ev.target||ev.srcElement;

哦了~~~休息咯