一、概念理解：
1、事件：HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應。比如點擊事件、鼠標移入/移出事件等。事件通常與函數配合使用，這樣就可以通過發生的事件來驅動函數執行。
2、DOM 事件流：冒泡事件流、捕獲事件流。
3、DOM 事件模型：捕獲、目標、冒泡。
那什么是事件委托呢？
事件委托：即是，一個事件本來是要綁定到某個元素上，然而卻綁定到了該元素的父（或祖先）元素上，利用事件冒泡原理，觸發執行效果。
二、事件委托的優點：
那為什么要使用事件委托？事件委托有什么好處，以及使用時要注意什么？
事件委托大概有兩個優點：
1、提高網頁性能。
2、通過事件委托添加的事件，對后期生成的元素依然有效。
上面提到的第二點如何理解呢？
舉個例子：現在頁面上有個 ul，ul 里有三個 li，通過循環給每個 li 添加點擊事件，發現三個 li 到可以正常觸發點擊事件了，然后通過 js 代碼在 ul 里插入（append）兩個 li，
再試著點擊所有 li，發現前面三個 li 正常觸發點擊事件，后面新添加的兩個 li 無法正常觸發點擊事件。
三、事件委托的使用方法：
使用上面 ul 的例子進行事件委托給每個 li 綁定事件，示例代碼：
var ul = document.querySelector("ul");
ul.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() === "li"){
alert("li");
}
}
從示例代碼中可以看出，要使用事件委托就要利用 event 對象。此處也能很容易的看出事件委托可以提高性能，因為本來需要對每個 li 都進行事件綁定，而現在只需要對 ul 進行事件綁定，減少了對DOM的操作。
四、事件委托怎么獲取元素下標（索引值）
示例 demo:
html 代碼 效果預覽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件委托 demo</title>
<style>
body{margin:0;}
ul{
list-style:none;
margin:0 0 0 10px;
padding:0;
}
ul li{
width:50px;
height:50px;
margin-top:10px;
background-color:red;
cursor:pointer;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var ul = document.querySelector("ul");
var li=ul.querySelectorAll("li");
ul.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
for(var i in li){
if(target === li[i]){
var value = parseInt(i);
alert("所點擊 li 的下標是：" + value);
}
}
}
</script>
</body>
</html>
最后說下事件綁定可能帶來的隱患，當頁面非常復雜的情況下，非常容易引起混亂，特別是當多種（個）事件通過事件委托綁定到同一個元素上時。
卓卓亭亭兮 發布于 2017-10-11 23:56:01 瀏覽：360 類型：原創 - 隨筆 分類：性能優化 - JavaScript 二維碼：
