JavaScript給事件委托批量添加事件監(jiān)聽詳細流程
更新時間：2021年10月19日 11:29:07 作者：daixiangcn
事件委托，一般來講，會把一個或者一組元素的事件委托到它的父層或者更外層元素上，真正綁定事件的是外層元素，當事件響應到需要綁定的元素上時，會通過事件冒泡機制從而觸發(fā)它的外層元素的綁定事件上，然后在外層元素上去執(zhí)行函數(shù)
1.什么是事件委托
事件委托：利用事件冒泡的特性，將本應該注冊在子元素上的處理事件注冊在父元素上，這樣點擊子元素時發(fā)現(xiàn)其本身沒有相應事件就到父元素上尋找作出相應。這樣做的優(yōu)勢有：
- 減少DOM操作，提高性能。
- 隨時可以添加子元素，添加的子元素會自動有相應的處理事件。
2.事件委托的原理
事件委托是利用事件的冒泡原理來實現(xiàn)的，何為事件冒泡呢？就是事件從最深的節(jié)點開始，然后逐步向上傳播事件。
舉個例子：頁面上有這么一個節(jié)點樹，div>ul>li>a;比如給最里面的a加一個click點擊事件，那么這個事件就會一層一層的往外執(zhí)行，執(zhí)行順序a>li>ul>div，有這樣一個機制，那么我們給最外面的div加點擊事件，那么里面的ul，li，a做點擊事件的時候，都會冒泡到最外層的div上，所以都會觸發(fā)，這就是事件委托，委托它們父級代為執(zhí)行事件。
3.事件委托的實現(xiàn)
通過一個案例來實現(xiàn)事件委托。
案例：批量添加事件監(jiān)聽。使用JavaScript實現(xiàn)：點擊哪個li，哪個li元素的背景變紅。
結(jié)構(gòu)層+樣式層代碼：
<style>
* {
margin: 0;
padding: 0;
}
ul {
float: left;
width: 800px;
margin-top: 50px;
}
ul li {
list-style: none;
float: left;
width: 200px;
height: 200px;
border: 1px solid #000;
margin-right: 20px;
}
ul li:first-child {
margin-left: 20px;
}
</style>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
3.1 方法1：循環(huán)添加事件
不使用事件委托，使用for循環(huán)添加點擊事件，內(nèi)存消耗大。
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.target.style.backgroundColor = 'red';
}
該案例中，e.target表示用戶真正點擊到的那個元素。
到此這篇關于JavaScript給事件委托批量添加事件監(jiān)聽詳細流程的文章就介紹到這了,更多相關JavaScript 事件委托內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
工作需要寫的一個js拖拽組件，需要的朋友可以參考下代碼。2011-07-07
關于賦值、淺拷貝、深拷貝，以前也思考良久，很多時候都以為記住了，但是，我太難了。今天我特地寫下筆記，希望可以完全掌握這個東西，也希望可以幫助到任何想對學習這個東西的同學2019-11-11
解決mui框架中switch開關通過js控制開或者關狀態(tài)時小圓點不動的問題
今天小編就為大家分享一篇解決mui框架中switch開關通過js控制開或者關狀態(tài)時小圓點不動的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript中內(nèi)存泄漏的介紹與教程（推薦）
內(nèi)存泄露是指一塊被分配的內(nèi)存既不能使用，又不能回收，直到瀏覽器進程結(jié)束。下面這篇文章主要給的大家介紹了關于JavaScript中內(nèi)存泄漏的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-06-06
js為快捷鍵綁定事件，當按這個快捷鍵時就會觸發(fā)事先綁定處理函數(shù)，下面以ctrl+k為例與大家分享下具體的實現(xiàn)代碼2014-09-09
本文主要介紹了使用javascript實現(xiàn)雪花飄落的特效，雖然網(wǎng)上有很多，不過都是比較陳舊了，兼容性不是太好，于是動手寫一個，把思路和實現(xiàn)代碼都分享給大家。2015-01-01
這篇文章主要介紹了淺談JS中this在各個場景下的指向，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
線路分流自動跳轉(zhuǎn)代碼；希望對大家有用！...2006-12-12
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)全選或反選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
Javascript連接多個數(shù)組不用concat來解決
這篇文章主要介紹了不用concat解決Javascript連接多個數(shù)組,需要的朋友可以參考下2014-03-03