JavaScript給事件委託批量新增事件監聽詳細流程
阿新 • • 發佈：2021-10-20
1.什麼是事件委託
事件委託：利用事件冒泡的特性，將本應該註冊在子元素上的處理事件註冊在父元素上，這樣點選子元素時發現其本身沒有相應事件就到父元素上尋找作出相應。這樣做的優勢有：
- 減少DOM操作，提高效能。
- 隨時可以新增子元素，新增的子元素會自動有相應的處理事件。
2.事件委託的原理
事件委託fOlwv是利用事件的冒泡原理來實現的，何為事件冒泡呢？就是事件從最深的節點開始，然後逐步向上傳播事件。
舉個例子：頁面上有這麼一個節點樹，div>ul>li>a;比如給最裡面的a加一個click點選事件，那麼這個事件就會一層一層的往外執行，執行順序a>li>ul>div，有這樣一個機制，那麼我們給最外面的div加點選事件，那麼裡面的ul，li，afOlwv
3.事件委託的實現
通過一個案例來實現事件委託。
案例：批量新增事件監聽。使用實現：點選哪個li，哪個li元素的背景變紅。
結構層+樣式層程式碼：
<style>
* {
margin: 0;
padding: 0;
}
ul {
float: left;
width: 800px;
margin-top: 50px;
}
ulhttp://www.cppcns.com 3.1 方法1：迴圈新增事件
不使用事件委託，使用for迴圈新增點選事件，記憶體消耗大。
var oList = document.getElementById('list');
var lis = oList.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
this.style.backgroundColor = 'red';
}
}
3.2方法2：使用事件委託
使用事件委託。
var oList = document.getElementById('list');
oList.onclick = function (e) {
e.targetwww.cppcns.com.style.backgroundColor = 'red';
}
該案例中，e.target表示使用者真正點選到的那個元素。
到此這篇關於Script給事件委託批量新增事件監聽詳細流程的文章就介紹到這了,更多相關JavaScript 事件委託內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！