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