一、 事件委托
- 事件委托：也可以稱之為事件代理，給父元素綁定事件，用來監聽子元素的冒泡事件，并找到是哪個子元素的事件。将事件委托給另外的元素，利用事件冒泡的特性，将裡層的事件委托給外層事件，将事件綁定到目标元素的父節點，根據event對象的屬性進行事件委托，改善性能。事件監聽器會分析從子元素冒泡上來的事件，找到是哪個子元素的事件。
-
事件委托的應用
1）新增的子元素是沒有事件的，說明添加子節點的時候，事件沒有一起添加進去
2）子元素太多，一個個循環周遊添加事件耗費性能
-
事件委托的原理
1）利用事件冒泡的特性，将裡層的事件委托給外層事件，根據event對象的屬性進行事件委托，改善性能
2）使用事件委托能夠避免對特定的每個節點添加事件監聽器；事件監聽器是被添加到它們的父元素上
3）事件監聽器會分析從子元素冒泡上來的事件，找到是哪個子元素的事件
- 事件委托的好處：使用事件委托，可以大大減少與DOM互動操作的次數，可以提供性能優化。在性能優化中，主要思想操作之一就是減少DOM的操作，記憶體的占用率就會減小。
二、事件委托的執行個體
-
事件委托的了解：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托</title>
</head>
<body>
<ul id="list">
<li>我是第一個li</li>
<li>我是第二個li</li>
<li>我是第三個li</li>
<li>我是第四個li</li>
<li>我是第五個li</li>
</ul>
</body>
<script>
window.onload = function(){
var list = document.getElementById("list");
var li = document.getElementsByTagName("li");
list.onmouseover = function(env){
// 相容擷取event對象
var env = env || window.event;
// 相容擷取目标對象 env.target為标準 env.srcElement為IE
var target = env.target || env.srcElement;
// 判斷目标對象是否是li
// target.nodeName 可以擷取節點名稱，通過toLowerCase()可以将節點名稱的大小轉換為小寫
if(target.nodeName.toLowerCase()=== "li"){
target.style.background = "red";
}
}
}
</script>
</html>
說明：需求分析是定義一個無序清單，當滑鼠移入的時候，能夠讓指定的li去變顔色。如果通過循環周遊給每一個li添加移入事件，會浪費性能，記憶體占用率就會過高。這個時候可以通過冒泡原理采取委托事件提高性能優化。擷取ul和li，給ul綁定滑鼠移入事件，相當于給父級添加移入事件，這樣不管移入哪一個li都會觸發父級的移入事件。在移入事件中，相容擷取event對象和目标對象，判斷事件源，找到目标對象的li，并且執行相應的變色操作。
-
利用事件委托分别實作不同的效果
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托</title>
</head>
<body>
<ul id="list">
<li id="li1">我是第一個li</li>
<li id="li2">我是第二個li</li>
<li id="li3">我是第三個li</li>
<li id="li4">我是第四個li</li>
<li id="li5">我是第五個li</li>
</ul>
</body>
<script>
window.onload = function(){
var list = document.getElementById("list");
var li = document.getElementsByTagName("li");
list.onmouseover = function(env){
var env = env || window.event;
var target = env.target || env.srcElement;
if(target.nodeName.toLowerCase()==="li"){
// 通過switch語句分别給li執行不同的操作
switch (target.id){
case "li1":
target.style.background = "red";
break;
case "li2":
target.style.background = "pink";
break;
case "li3":
target.style.background = "orange";
break;
case "li4":
target.style.background = "purple";
break;
case "li5":
target.style.background = "blue";
break;
}
}
}
};
</script>
</html>
說明：需求分析是當點選不同的li的時候，li會實作不同的顔色效果。采取事件委托的方式，先擷取ul和li元素，給父級元素ul綁定滑鼠移入事件，相容擷取event對象和目标對象，找到事件源，通過switch語句，進行具體的li，分别給li添加不同的效果，這樣就減少了dom操作，提高了性能優化。
-
通過監聽器進行事件委托
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托</title>
</head>
<body>
<ul id="list">
<li>我是第一個li</li>
<li>我是第二個li</li>
<li>我是第三個li</li>
<li>我是第四個li</li>
<li>我是第五個li</li>
</ul>
</body>
<script>
var list = document.getElementById("list");
list.addEventListener("click",function(env){
console.log(env.target.innerHTML);
});
</script>
</html>
說明：需求分析是定義一個無序清單，當點選li的時候，對應的li的内容會輸出在控制台中。第一步是給父元素ul綁定事件，通過addEventListener監聽綁定click點選事件。第二步是監聽子元素的冒泡事件，當點選子元素li的時候會向上進行冒泡。 第三步是通過匿名函數擷取觸發事件的目标，找到是哪一個子元素的事件。這樣當滑鼠點選的li的時候，對應的li的内容也會輸出在控制台中。
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)