JavaScript事件委托實現(xiàn)原理及優(yōu)點進(jìn)行
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、事件冒泡 和 事件捕獲
如圖，事件冒泡是從子元素向父元素傳遞事件，一層一層，事件委托就是利用了冒泡原理；事件捕獲是從 DOM 最高層對象一層一層往子元素傳播。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
最少知識原則（LKP）說的是一個軟件實體應(yīng)當(dāng)盡可能少地與其他實體發(fā)生相互作用。這里的軟件實體是一個廣義的概念，不僅包括對象，還包括系統(tǒng)、類、模塊、函數(shù)、變量等2022-08-08
這篇文章主要給大家介紹了關(guān)于在JavaScript中如何使用宏的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
常常會用到的截取字符串substr()、substring()、slice()方法詳解
javascript中給我們提供三個截取字符串的方法,分別是:slice(),substring()和substr()。下面我們對這三個函數(shù)進(jìn)行詳細(xì)說明和比較,需要的朋友可以參考下2015-12-12
JavaScript如何實現(xiàn)組合列表框中元素移動效果
在頁面中有兩個列表框，需要把其中一個列表框的元素移動到另一個列表框，怎么實現(xiàn)此功能呢，下面通過本文給大家介紹JavaScript如何實現(xiàn)組合列表框中元素移動效果，感興趣的朋友一起學(xué)習(xí)吧2016-03-03
今天小編就為大家分享一篇layer彈出層全屏及關(guān)閉方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
BootStrap Table后臺分頁時前臺刪除最后一頁所有數(shù)據(jù)refresh刷新后無數(shù)據(jù)問題
這篇文章主要介紹了BootStrap Table后臺分頁時前臺刪除最后一頁所有數(shù)據(jù)refresh刷新后無數(shù)據(jù)問題,需要的朋友可以參考下2016-12-12
JavaScript數(shù)組去重和扁平化函數(shù)介紹
這篇文章主要介紹了JavaScript數(shù)組去重和扁平化函數(shù)，數(shù)組扁平化又稱數(shù)組降維，下面文章圍繞數(shù)組去重和扁平化函數(shù)得相關(guān)資料展開內(nèi)容,需要的朋友可以參考一下2021-12-12
這篇文章主要給大家介紹了關(guān)于JS異步錯誤捕獲的一些事，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Javascript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了JS模仿手機(jī)端九宮格登錄功能實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了JS獲取下拉框顯示值和判斷單選按鈕的方法,實例分析了javascript針對html下拉框及單選按鈕的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07