JavaScript事件委托實(shí)現(xiàn)原理及優(yōu)點(diǎn)進(jìn)行
1、什么是事件委托？
事件委托就是利用冒泡的原理，將事件加到 父元素 或 祖先元素上，觸發(fā)執(zhí)行效果。
例：在 document 中綁定 click 事件，當(dāng) click 的對(duì)象為 按鈕 btn 時(shí)，彈框顯示 按鈕 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)點(diǎn)
（1）可以提高 JS 性能
例：在 ul 上創(chuàng)建 100 個(gè) li，點(diǎn)擊每個(gè) li 都要彈框顯示該 li 的 value
傳統(tǒng)寫(xiě)法：在每個(gè) li 上都綁定 onclick 事件，并觸發(fā) alert 事件
事件委托：在 document 上綁定 onclick 事件，當(dāng)觸發(fā) onclick 事件后，判斷是不是 <li> 標(biāo)簽，如果是，則 alert <li> 標(biāo)簽的值。
（2）可以動(dòng)態(tài)添加 DOM 元素，不需要因?yàn)樵氐淖儎?dòng)而修改事件綁定。
3、事件委托需要注意的地方
事件委托綁定的元素，最好是被監(jiān)聽(tīng)元素的父元素，如 <li> 上面的 <ul>、<tr> 上面的 <table> 等。
因?yàn)?事件冒泡 的過(guò)程也要耗時(shí)，越接近頂層，事件的「事件傳播鏈」就越長(zhǎng)，也就越耗時(shí)。
4、事件冒泡 和 事件捕獲
如圖，事件冒泡是從子元素向父元素傳遞事件，一層一層，事件委托就是利用了冒泡原理；事件捕獲是從 DOM 最高層對(duì)象一層一層往子元素傳播。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript制作windows經(jīng)典掃雷小游戲
掃雷是一款相當(dāng)大眾的小游戲,游戲目標(biāo)是在最短的時(shí)間內(nèi)根據(jù)點(diǎn)擊格子出現(xiàn)的數(shù)字找出所有非雷格子,同時(shí)避免踩雷。今天我們來(lái)看看如何使用javascript來(lái)實(shí)現(xiàn)這款小游戲2015-03-03
這篇文章主要介紹了詳解Webwork中Action 調(diào)用的方法的相關(guān)資料,需要的朋友可以參考下2016-02-02
JS數(shù)組轉(zhuǎn)字符串實(shí)現(xiàn)方法解析
這篇文章主要介紹了JS數(shù)組轉(zhuǎn)字符串實(shí)現(xiàn)方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
JavaScript中null和undefined的區(qū)別詳解
null 是一個(gè)原始值,表示“無(wú)”或“空值”,它通常用于指示變量應(yīng)有的對(duì)象或值不存在,undefined 是一個(gè)原始值,表示“未定義”,本文給大家詳細(xì)介紹了JavaScript中null和undefined的區(qū)別,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了js判斷一個(gè)字符串是否包含一個(gè)子串的方法,實(shí)例分析了判斷的技巧與第三方腳本的使用方法,需要的朋友可以參考下2015-01-01
JavaScript高級(jí)編程之Array的用法總結(jié)
這篇文章主要為大家介紹了JavaScript中Array常見(jiàn)用法的總結(jié)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-11-11
本文通過(guò)實(shí)例代碼給大介紹了js多文件上傳的實(shí)現(xiàn)方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-01
這篇文章主要介紹了Javascript圖片預(yù)加載，幫助大家理解Javascript圖片預(yù)加載的實(shí)現(xiàn)原理，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了詳解html-webpack-plugin用法全解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
JS實(shí)現(xiàn)導(dǎo)出Excel和CSV文件操作
這篇文章介紹了JS實(shí)現(xiàn)導(dǎo)出Excel和CSV文件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05