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元素的背景變紅。
結構層+樣式層代碼：
<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)添加點擊事件，內存消耗大。
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 事件委托內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)上拉加載功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
本文主要介紹了JavaScript 事件對內存和性能的影響。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
JavaScript實現(xiàn)iframe自動高度調整和不同主域名跨域
這篇文章主要介紹了JavaScript實現(xiàn)iframe自動高度調整和不同主域名跨域,作者通過建立一個代理來同步高度調整,需要的朋友可以參考下2016-02-02
獲取圖片尺寸(不設置寬高)及放大圖片：利用了IE的私有屬性防止圖片放大失真嚴重！感興趣的朋友可以參考下2013-09-09
ie中用close關閉非open打開的窗口時回彈出一個對話框詢問用戶，怎么去掉這個框呢，在window.close之前加上window.top.opener = null就可以了2014-09-09
這篇文章主要為大家詳細介紹了純js實現(xiàn)打字機效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
定時器顧名思義就是在某個特定的時間去執(zhí)行一些任務，現(xiàn)代的應用程序早已不是以前的那些由簡單的增刪改查拼湊而成的程序了，高復雜性早已是標配，而任務的定時調度與執(zhí)行也是對程序的基本要求了。本文將利用JavaScript手寫原生任務定時器，需要的可以參考一下2022-03-03
使用JavaScript動態(tài)設置樣式實現(xiàn)代碼及演示動畫
使用onmouseover和onmouseout事件實現(xiàn)不同的效果而且是使用js動態(tài)實現(xiàn)，本文有利于鞏固你js與css方面的知識，感興趣的你可以了解下哦，希望本文對你有所幫助2013-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)拖動滑塊效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家介紹了提高團隊代碼質量利器ESLint及Prettier使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11