溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript如何給事件委托批量添加事件監(jiān)聽

發(fā)布時間：2021-10-19 13:35:06 來源：億速云 閱讀：139 作者：小新 欄目：開發(fā)技術(shù)

這篇文章主要介紹JavaScript如何給事件委托批量添加事件監(jiān)聽，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

1.什么是事件委托

事件委托：利用事件冒泡的特性，將本應(yīng)該注冊在子元素上的處理事件注冊在父元素上，這樣點擊子元素時發(fā)現(xiàn)其本身沒有相應(yīng)事件就到父元素上尋找作出相應(yīng)。這樣做的優(yōu)勢有：

  • 減少DOM操作，提高性能。

  • 隨時可以添加子元素，添加的子元素會自動有相應(yīng)的處理事件。

2.事件委托的原理

事件委托是利用事件的冒泡原理來實現(xiàn)的，何為事件冒泡呢？就是事件從最深的節(jié)點開始，然后逐步向上傳播事件。
舉個例子：頁面上有這么一個節(jié)點樹，div>ul>li>a;比如給最里面的a加一個click點擊事件，那么這個事件就會一層一層的往外執(zhí)行，執(zhí)行順序a>li>ul>div，有這樣一個機(jī)制，那么我們給最外面的div加點擊事件，那么里面的ul，li，a做點擊事件的時候，都會冒泡到最外層的div上，所以都會觸發(fā)，這就是事件委托，委托它們父級代為執(zhí)行事件。

3.事件委托的實現(xiàn)

通過一個案例來實現(xiàn)事件委托。
案例：批量添加事件監(jiān)聽。使用JavaScript實現(xiàn)：點擊哪個li，哪個li元素的背景變紅。

JavaScript如何給事件委托批量添加事件監(jiān)聽

結(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)聽”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手