溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了什么是javascript事件委托，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
在javascript中，事件委托就是利用冒泡的原理，將事件加到父元素或祖先元素上，觸發(fā)執(zhí)行效果。事件委托的優(yōu)點：1、可以提高JS性能；2、可以動態(tài)添加DOM元素，不需要因為元素的變動而修改事件綁定。
1、什么是事件委托？
事件委托就是利用冒泡的原理，將事件加到 父元素 或 祖先元素上，觸發(fā)執(zhí)行效果。
例：在 document 中綁定 click 事件，當(dāng) 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、事件委托的優(yōu)點
（1）可以提高 JS 性能
例：在 ul 上創(chuàng)建 100 個 li，點擊每個 li 都要彈框顯示該 li 的 value
傳統(tǒng)寫法：在每個 li 上都綁定 onclick 事件，并觸發(fā) alert 事件
事件委托：在 document 上綁定 onclick 事件，當(dāng)觸發(fā) onclick 事件后，判斷是不是 <li> 標(biāo)簽，如果是，則 alert <li> 標(biāo)簽的值。
（2）可以動態(tài)添加 DOM 元素，不需要因為元素的變動而修改事件綁定。
3、事件委托需要注意的地方
事件委托綁定的元素，最好是被監(jiān)聽元素的父元素，如 <li> 上面的 <ul>、<tr> 上面的 <table> 等。
因為 事件冒泡 的過程也要耗時，越接近頂層，事件的「事件傳播鏈」就越長，也就越耗時。
4、事件冒泡 和 事件捕獲
上述內(nèi)容就是什么是javascript事件委托，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼