深刻理解事件委托或者事件代理

概述：

事件委托 是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。优势（去快递事件，新员工）。

原因：

在js中，添加到页面上的事件处理程序数量关系到页面的整体运行性能，用for循环遍历所有li，给他们添加事件，不断与dom节点进行交互，访问dom越多，引起浏览器的重绘与重排的次数就越多，延长整个页面的交互就绪时间。优化思想之一减少dom操作原因。如果使用事件委托，所有操作都在js里，与dom的操作只交互一次，大大减少与dom的交互次数，提高性能。

原理：

利用事件冒泡原理实现。事件冒泡，事件从最深的节点开始，逐步向上传播事件。ul>li，给li添加click事件，执行顺序li>ul， 给ul添加事件，点击li时，会出发，这就是事件委托，委托他们父级代为执行事件。

实现：

Event对象提供了一个属性target，可以返回事件的目标节点。标准浏览器使用ev.target，IE浏览器用event.srcElement。

• 相同效果：

var oUl = document.getElementById("ul1");oUl.onclick = function(ev){    var ev = ev || window.event ;    var target = ev.target || ev.srcElement;    if(target.nodeName.toLocaleLowerCase() == "li"){        alert(target.innerHTML)    }}

• 不同效果：

var oBox = document.getElementById("box");oBox.onclick = function(ev){    var ev = ev || window.event;    var target = ev.target || ev.srcElement;    if(target.nodeName.toLocaleLowerCase() == "input"){        switch(target.id){            case "add":                var aLi = document.createElement("li");                aLi.innerHTML = "555";                oUl.appendChild(aLi);                break;            case "remove":                alert("remove");                break;            case "move":                alert("move");                break;            case "select":                alert("select");                break;        }    }}

• 测试：

$("#ul1").on("click","li",function(e){    e.stopPropagation();    alert(123)})

总结：

适合用事件委托的事件：click，mousedown，mouseup，keyup，keypress。
注意：mouseover与mousemove有事件冒泡，但是要计算位置。
不适合：mouseover，focus，blur。后两个无冒泡特性。
事件触发顺序： 事件触发顺序：keydown - > keypress - > keyup