快捷導(dǎo)航

JavaScript事件委托(事件代理)舉例詳解

更新時(shí)間：2024年03月25日 11:31:26 作者：與宇宙對(duì)視

JavaScript事件委托是一種常見(jiàn)的優(yōu)化性能的技術(shù),它利用了事件冒泡的機(jī)制,將事件處理程序綁定在父元素上,而不是綁定在每個(gè)子元素上,這篇文章主要給大家介紹了關(guān)于JavaScript事件委托(事件代理)的相關(guān)資料,需要的朋友可以參考下

是什么

利用 JS 事件冒泡動(dòng)態(tài)為元素綁定事件的方法稱(chēng)為事件委托（Event Delegation，也稱(chēng)為“事件代理”）。

事件委托就是把原本需要綁定在子元素上的事件（onclick、onkeydown 等）委托給它的父元素，讓父元素來(lái)監(jiān)聽(tīng)子元素的冒泡事件，并在子元素發(fā)生事件冒泡時(shí)找到這個(gè)子元素。

為什么

在 JavaScript 中，頁(yè)面內(nèi)事件處理程序的個(gè)數(shù)會(huì)直接影響頁(yè)面的整體性能，因?yàn)槊總€(gè)事件處理程序都是對(duì)象，對(duì)象會(huì)占用內(nèi)存，內(nèi)存中的對(duì)象越多，頁(yè)面的性能則越差。此外，事件處理程序需要與 DOM 節(jié)點(diǎn)進(jìn)行交互，訪(fǎng)問(wèn) DOM 的次數(shù)越多，引起瀏覽器重繪和重排的次數(shù)也就越多，從而影響頁(yè)面的性能。

重繪是指當(dāng)元素樣式改變時(shí)，瀏覽器會(huì)根據(jù)元素的新樣式重新繪制元素的外觀(guān)。
重排是指當(dāng) DOM 樹(shù)的一部分發(fā)生變化時(shí)（例如元素尺寸改變），瀏覽器會(huì)重新創(chuàng)建 DOM 樹(shù)。

事件委托原理回顧

事件委托是利用事件的冒泡原理來(lái)實(shí)現(xiàn)的，大致可以分為三個(gè)步驟：

確定要添加事件元素的父級(jí)元素
給父元素定義事件，監(jiān)聽(tīng)子元素的冒泡事件
使用 event.target 來(lái)定位觸發(fā)事件冒泡的子元素。

e.target指向的是觸發(fā)事件的元素； e.currentTarget指向的是添加監(jiān)聽(tīng)事件的元素；

注意：使用事件委托時(shí)，并不是說(shuō)把事件委托給隨意一個(gè)父元素就行。因?yàn)槭录芭莸倪^(guò)程也需要消耗時(shí)間，距離越遠(yuǎn)，所需的時(shí)間也就越長(zhǎng)，所有最好在直接父元素上使用事件委托。

舉例子

1.假如我們要為 ul 列表下的每個(gè) li 標(biāo)簽添加點(diǎn)擊事件，如果不使用事件委托，最簡(jiǎn)單的辦法就是使用循環(huán)來(lái)為每個(gè) li 標(biāo)簽綁定事件，示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        window.onload = function(){
            var the_ul = document.getElementById('list');
            var the_li = the_ul.getElementsByTagName('li');
            for( var i=0; i < the_li.length; i++ ){
                the_li[i].onclick = function(){
                    console.log(this.innerHTML)
                }
            }
        }
    </script>
</body>
</html>

2.通過(guò)上面的代碼可以看出，要為每個(gè) li 標(biāo)簽綁定點(diǎn)擊事件，首先需要找到 ul 標(biāo)簽，然后通過(guò) ul 標(biāo)簽找到所有 li 標(biāo)簽，最后在通過(guò)遍歷所有 li 標(biāo)簽來(lái)綁定事件。若使用事件委托的話(huà)，就會(huì)簡(jiǎn)單很多，示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        window.onload = function(){
            var the_ul = document.getElementById('list');
            the_ul.onclick = function(e){
                console.log(e.target.innerHTML)
            }
        }
    </script>
</body>
</html>

通過(guò)代碼可以看出，使用事件委托我們只需要為 ul 標(biāo)簽綁定事件，當(dāng) li 標(biāo)簽被點(diǎn)擊時(shí)，由于事件冒泡的特性，會(huì)觸發(fā) ul 標(biāo)簽上的事件，我們只需要在事件中通過(guò) event 對(duì)象中的 target 屬性來(lái)找到被點(diǎn)擊的 li 標(biāo)簽即可。不過(guò)這樣做也有一個(gè)弊端，那就是當(dāng)我們點(diǎn)擊 ul 標(biāo)簽時(shí)，也會(huì)觸發(fā)事件。

3.另外，如果我們需要?jiǎng)討B(tài)的向 ul 標(biāo)簽中添加 li 標(biāo)簽，同時(shí)也需要在新添加的 li 標(biāo)簽中添加點(diǎn)擊事件，就必須通過(guò)事件委托來(lái)實(shí)現(xiàn)了，示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <ul id="list" style="width: 100px;margin:0;float: left;">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <button style="float:left;" id="addli">添加一個(gè) li</button>
    <button style="float:left;" id="delli">刪除一個(gè) li</button>
    <script>
        window.onload = function(){
            var the_ul = document.getElementById('list');
            var the_li = the_ul.getElementsByTagName('li');
            var sum = the_li.length
            the_ul.onclick = function(e){
                console.log(e.target.innerHTML)
            };
            document.getElementById('addli').onclick = function (){
                var newli = document.createElement("li");
                newli.innerHTML = ++sum;
                the_ul.appendChild(newli);
            };
            document.getElementById('delli').onclick = function (){
                the_ul.firstElementChild.remove();
            };
        }
    </script>
</body>
</html>

事件委托的優(yōu)點(diǎn)

1) 減小內(nèi)存消耗使用事件委托可以大量節(jié)省內(nèi)存，減少事件的定義，通過(guò)上面的示例可以看出，要為 ul 標(biāo)簽下的所有 li 標(biāo)簽添加點(diǎn)擊事件，如果分別為每個(gè) li 標(biāo)簽綁定事件，不僅寫(xiě)起來(lái)比較繁瑣，而且對(duì)內(nèi)存的消耗也非常大。而使用事件委托的方式將點(diǎn)擊事件綁定到 ul 標(biāo)簽上，就可以實(shí)現(xiàn)監(jiān)聽(tīng)所有 li 標(biāo)簽，簡(jiǎn)潔、高效。

2) 動(dòng)態(tài)綁定事件在網(wǎng)頁(yè)中，有時(shí)我們需要?jiǎng)討B(tài)增加或移除頁(yè)面中的元素，比如上面示例中動(dòng)態(tài)的在 ul 標(biāo)簽中添加 li 標(biāo)簽，如果不使用事件委托，則需要手動(dòng)為新增的元素綁定事件，同時(shí)為刪除的元素解綁事件。而使用事件委托就沒(méi)有這么麻煩了，無(wú)論是增加還是減少 ul 標(biāo)簽中的 li 標(biāo)簽，即不需要再為新增的元素綁定事件，也不需要為刪除的元素解綁事件。

所以使用事件委托動(dòng)態(tài)綁定事件可以減少很多重復(fù)工作的。

總結(jié)

要使用事件委托，需要保證事件能夠發(fā)生冒泡，適合使用事件委托的事件有 click、mousedown、mouseup、keydown、keyup、keypress 等。需要注意的是，雖然 mouseover 和 mouseout 事件也會(huì)發(fā)生事件冒泡，但處理起來(lái)非常麻煩，所以不推薦在 mouseover 和 mouseout 事件中使用事件委托。

另外，對(duì)于不會(huì)發(fā)生事件冒泡的事件（例如 load、unload、abort、focus、blur 等），則無(wú)法使用事件委托。
（參考于：http://c.biancheng.net/view/9380.html）

到此這篇關(guān)于JavaScript事件委托(事件代理)的文章就介紹到這了,更多相關(guān)js事件委托(事件代理)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: