快捷導(dǎo)航

JavaScript給事件委托批量添加事件監(jiān)聽(tīng)詳細(xì)流程

更新時(shí)間：2021年10月19日 11:29:07 作者：daixiangcn

事件委托，一般來(lái)講，會(huì)把一個(gè)或者一組元素的事件委托到它的父層或者更外層元素上，真正綁定事件的是外層元素，當(dāng)事件響應(yīng)到需要綁定的元素上時(shí)，會(huì)通過(guò)事件冒泡機(jī)制從而觸發(fā)它的外層元素的綁定事件上，然后在外層元素上去執(zhí)行函數(shù)

1.什么是事件委托

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

減少DOM操作，提高性能。
隨時(shí)可以添加子元素，添加的子元素會(huì)自動(dòng)有相應(yīng)的處理事件。

2.事件委托的原理

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

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

通過(guò)一個(gè)案例來(lái)實(shí)現(xiàn)事件委托。
案例：批量添加事件監(jiān)聽(tīng)。使用JavaScript實(shí)現(xiàn)：點(diǎn)擊哪個(gè)li，哪個(gè)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)添加點(diǎ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表示用戶(hù)真正點(diǎn)擊到的那個(gè)元素。

到此這篇關(guān)于JavaScript給事件委托批量添加事件監(jiān)聽(tīng)詳細(xì)流程的文章就介紹到這了,更多相關(guān)JavaScript 事件委托內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: