JavaScript事件委託實現原理及優點進行
阿新 • • 發佈：2020-08-31
1、什麼是事件委託？
事件委託就是利用冒泡的原理，將事件加到 父元素 或 祖先元素上，觸發執行效果。
例：在 document 中繫結 click 事件，當 click 的物件為 按鈕 btn 時，彈框顯示 按鈕 btn的值
<body>
<button id="btn" value="嘿嘿">哈哈</button>
<script>
window.onload=function () {
let btn=document.getElementById("btn")
document.onclick=function (e) {
// console.log(e.target)
if(e.target===btn){
alert(btn.value)
}
}
}
</script>
</body>
2、事件委託的優點
（1）可以提高 JS 效能
例：在 ul 上建立 100 個 li，點選每個 li 都要彈框顯示該 li 的 value
傳統寫法：在每個 li 上都繫結 onclick 事件，並觸發 alert 事件
事件委託：在 document 上繫結 onclick 事件，當觸發 onclick 事件後，判斷是不是 <li> 標籤，如果是，則 alert <li> 標籤的值。
（2）可以動態新增 DOM 元素，不需要因為元素的變動而修改事件繫結。
3、事件委託需要注意的地方
事件委託繫結的元素，最好是被監聽元素的父元素，如 <li> 上面的 <ul>、<tr> 上面的 <table> 等。
因為 事件冒泡 的過程也要耗時，越接近頂層，事件的「事件傳播鏈」就越長，也就越耗時。
4、事件冒泡 和 事件捕獲
如圖，事件冒泡是從子元素向父元素傳遞事件，一層一層，事件委託就是利用了冒泡原理；事件捕獲是從 DOM 最高層物件一層一層往子元素傳播。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。