欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2024年03月25日 11:31:26   作者：與宇宙對視  
JavaScript事件委托是一種常見的優(yōu)化性能的技術(shù),它利用了事件冒泡的機(jī)制,將事件處理程序綁定在父元素上,而不是綁定在每個(gè)子元素上,這篇文章主要給大家介紹了關(guān)于JavaScript事件委托(事件代理)的相關(guān)資料,需要的朋友可以參考下

是什么

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

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

為什么

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

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

事件委托原理回顧

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

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

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

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

舉例子

1.假如我們要為 ul 列表下的每個(gè) li 標(biāo)簽添加點(diǎn)擊事件，如果不使用事件委托，最簡單的辦法就是使用循環(huán)來為每個(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.通過上面的代碼可以看出，要為每個(gè) li 標(biāo)簽綁定點(diǎn)擊事件，首先需要找到 ul 標(biāo)簽，然后通過 ul 標(biāo)簽找到所有 li 標(biāo)簽， 最后在通過遍歷所有 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');
            the_ul.onclick = function(e){
                console.log(e.target.innerHTML)
            }
        }
    </script>
</body>
</html>

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

3.另外，如果我們需要?jiǎng)討B(tài)的向 ul 標(biāo)簽中添加 li 標(biāo)簽，同時(shí)也需要在新添加的 li 標(biāo)簽中添加點(diǎn)擊事件，就必須通過事件委托來實(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)存，減少事件的定義，通過上面的示例可以看出，要為 ul 標(biāo)簽下的所有 li 標(biāo)簽添加點(diǎn)擊事件，如果分別為每個(gè) li 標(biāo)簽綁定事件，不僅寫起來比較繁瑣，而且對內(nèi)存的消耗也非常大。而使用事件委托的方式將點(diǎn)擊事件綁定到 ul 標(biāo)簽上，就可以實(shí)現(xiàn)監(jiān)聽所有 li 標(biāo)簽，簡潔、高效。

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

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

總結(jié)

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

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

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

相關(guān)文章

最新評論