溫馨提示×

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

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

javascript中事件監(jiān)聽(tīng)與事件委托的示例分析

發(fā)布時(shí)間：2021-06-26 10:03:54 來(lái)源：億速云 閱讀：143 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要介紹了javascript中事件監(jiān)聽(tīng)與事件委托的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

事件監(jiān)聽(tīng)與事件委托

在js中，常用到element.addEventListener()來(lái)進(jìn)行事件的監(jiān)聽(tīng)。但是當(dāng)頁(yè)面中存在大量需要綁定事件的元素時(shí)，這種方式可能會(huì)帶來(lái)性能影響。此時(shí)，我們可以用事件委托的方式來(lái)進(jìn)行事件的監(jiān)聽(tīng)。

每個(gè)事件都經(jīng)歷三個(gè)階段

  • 捕獲

  • 到達(dá)目標(biāo)

  • 冒泡

事件委托需要用到事件的冒泡，冒泡就是事件發(fā)生時(shí)，上層會(huì)一層一層的接收這個(gè)事件。

如下頁(yè)面結(jié)構(gòu)：

<body>
  <div id="div1">
    <div id="div2">
      <button>按鈕</button>
    </div>
  </div>
</body>

當(dāng)點(diǎn)擊按鈕，首先button接收到事件，然后向上層冒泡，接著id="div1"接收到事件，接著是id="div2"，一直到達(dá)document的頂層。

所以可以添加一個(gè)事件處理器到父級(jí)，由他接收所有子節(jié)點(diǎn)的事件信息。這就是事件委托。

事件監(jiān)聽(tīng)與事件委托性能比較

通過(guò)構(gòu)建若干個(gè)button元素，并為其綁定事件監(jiān)聽(tīng)器來(lái)比較事件監(jiān)聽(tīng)與事件委托的性能。

1.構(gòu)建若干個(gè)button元素，并添加到body中

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body id='body'>
  <script type="text/javascript">
    var body = document.getElementById('body');
    var fragment = document.createDocumentFragment();
    for (var i = 0; i < 100; i++) {
      var btn = document.createElement('button');
      btn.id = i;
      btn.className = 'btn';
      btn.type = 'button';
      btn.innerText = '按鈕'
      fragment.appendChild(btn);
    }
    body.appendChild(fragment);
  </script>
</body>
</html>

此時(shí)頁(yè)面生成了100個(gè)按鈕，id為0到99，class為'btn'；fragment是一個(gè)文檔片段，相比較下面這種代碼的好處是

for(var i = 0;i<100;i++){
  var btn=document.createElement('button');
  body.appendChild(btn);
}

前者頁(yè)面只重排一次，后者頁(yè)面重排了100次；所以若遇到大模塊添加dom時(shí)，最好使用fragment

2.為button綁定事件監(jiān)聽(tīng)器，并設(shè)置時(shí)間戳

var btn = document.querySelectorAll('.btn');
var date1 = new Date();
for (var i = 0; i < btn.length; i++) {
    (function(i) {
      btn[i].addEventListener('click', function() {
        console.log(i);
      });
    })(i)
}

3.給body綁定click事件，實(shí)現(xiàn)事件的委托

var date2 = new Date();
body.addEventListener('click', function(e) {
    var element = e.target;
    if (element.className == 'btn') {
      console.log(element.id);
    }
})
var date3 = new Date();

下面我們來(lái)通過(guò)時(shí)間戳分析一下這兩種方式的性能。

console.log(date2 - date1);
console.log(date3 - date1);

通過(guò)改變button的數(shù)量，得到以下數(shù)據(jù)(單位：ms)：

在360兼容模式下：

  • 當(dāng)button數(shù)量為100時(shí)，平均為 6 0

  • 當(dāng)button數(shù)量為400時(shí)，平均為 20 0

  • 當(dāng)button數(shù)量為1000時(shí)，平均為 48 0

在新版谷歌下：

  • 當(dāng)button數(shù)量為1000時(shí)，平均為 3 0

可見(jiàn)當(dāng)頁(yè)面中有大量元素需要綁定事件時(shí)，并不是所有的事件都會(huì)被觸發(fā)，而這時(shí)對(duì)所有需要監(jiān)聽(tīng)的元素都綁定事件處理器無(wú)疑是要花費(fèi)代價(jià)的，而通過(guò)事件委托的方式可以很好的解決性能問(wèn)題，不需要為每個(gè)元素都綁定事件監(jiān)聽(tīng)器。但是要寫(xiě)一些邏輯代碼來(lái)判斷事件源。所以，如果你的web項(xiàng)目對(duì)性能要求極為苛刻，事件委托也不失于一種優(yōu)雅的選擇

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“javascript中事件監(jiān)聽(tīng)與事件委托的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

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

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

AI
助
手