溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“JavaScript給事件委托批量添加事件監聽的方法是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
事件委托：利用事件冒泡的特性，將本應該注冊在子元素上的處理事件注冊在父元素上，這樣點擊子元素時發現其本身沒有相應事件就到父元素上尋找作出相應。這樣做的優勢有：
減少DOM操作，提高性能。
隨時可以添加子元素，添加的子元素會自動有相應的處理事件。
事件委托是利用事件的冒泡原理來實現的，何為事件冒泡呢？就是事件從最深的節點開始，然后逐步向上傳播事件。
舉個例子：頁面上有這么一個節點樹，div>ul>li>a;比如給最里面的a加一個click點擊事件，那么這個事件就會一層一層的往外執行，執行順序a>li>ul>div，有這樣一個機制，那么我們給最外面的div加點擊事件，那么里面的ul，li，a做點擊事件的時候，都會冒泡到最外層的div上，所以都會觸發，這就是事件委托，委托它們父級代為執行事件。
通過一個案例來實現事件委托。
案例：批量添加事件監聽。使用JavaScript實現：點擊哪個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>不使用事件委托，使用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';
}
}使用事件委托。
var oList = document.getElementById('list');
oList.onclick = function (e) {
e.target.style.backgroundColor = 'red';
}該案例中，e.target表示用戶真正點擊到的那個元素。
“JavaScript給事件委托批量添加事件監聽的方法是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
