在日常中，我們可能會聽到事件委托這樣的概念，有些同學可能對事件委托已經很了解了，也有些同學可能隻是聽過事件委托，隻是會簡單的使用，但是對于事件委托的原理不怎麼知道。是以該博文會解釋一下原生js的事件委托的原理，為什麼會有事件委托，為什麼可以這樣用事件委托等等問題。
1.js中的事件流
在解析事件委托之前，我們先回顧一下js中的事件流，即冒泡和捕獲。 1.冒泡：當下級節點觸發某個事件的時候，該事件會逐級向上觸發上級節點的同類事件。 2.捕獲：和冒泡類似，隻不過事件的順序相反。即是從上級節點傳遞到下級節點
2.事件委托原理
事件委托就是基于js的事件流産生的，事件委托是利用事件冒泡，将事件加在父元素或者祖先元素上，觸發該事件。
<body>
<div id="myDiv">
<input type="button" value="按鈕1" id="btn1">
<input type="button" value="按鈕2" id="btn2">
<input type="button" value="按鈕3" id="btn3">
</div>
</body>
<script type="text/javascript">
document.getElementById("myDiv").οnclick=function(e){
e=window.event||e;
var btnId=e.target.id;
switch(btnId){
case "btn1":
console.log("按鈕1");
break;
case "btn2":
console.log("按鈕2");
break;
case "btn3":
console.log("按鈕3");
break;
}
}
</script>
上面的代碼就是一個典型的事件委托案例。利用的原理就是事件冒泡，将事件加載父元素上，通過event參數來差別按鈕的不同
3.總結
通過對上面事件委托代碼的觀察，我們可以很容易得出事件委托的好處： 1.減少頁面綁定事件數量，由于頁面事件綁定數量越多，頁面執行性能越差，是以事件委托可以提高頁面的性能 2.事件委托可以靈活的處理子節點動态變化的場景，無論子節點增加還是減少，事件都無需重新綁定
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)