溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了javascript中事件監(jiān)聽與事件委托怎么實現(xiàn)的相關知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇javascript中事件監(jiān)聽與事件委托怎么實現(xiàn)文章都會有所收獲，下面我們一起來看看吧。
事件監(jiān)聽與事件委托
在js中，常用到element.addEventListener()來進行事件的監(jiān)聽。但是當頁面中存在大量需要綁定事件的元素時，這種方式可能會帶來性能影響。此時，我們可以用事件委托的方式來進行事件的監(jiān)聽。
每個事件都經(jīng)歷三個階段
捕獲
到達目標
冒泡
事件委托需要用到事件的冒泡，冒泡就是事件發(fā)生時，上層會一層一層的接收這個事件。
如下頁面結構：
<body> <div id="div1"> <div id="div2"> <button>按鈕</button> </div> </div> </body>
當點擊按鈕，首先button接收到事件，然后向上層冒泡，接著id="div1"接收到事件，接著是id="div2"，一直到達document的頂層。
所以可以添加一個事件處理器到父級，由他接收所有子節(jié)點的事件信息。這就是事件委托。
事件監(jiān)聽與事件委托性能比較
通過構建若干個button元素，并為其綁定事件監(jiān)聽器來比較事件監(jiān)聽與事件委托的性能。
1.構建若干個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>此時頁面生成了100個按鈕，id為0到99，class為'btn'；fragment是一個文檔片段，相比較下面這種代碼的好處是
for(var i = 0;i<100;i++){
var btn=document.createElement('button');
body.appendChild(btn);
}前者頁面只重排一次，后者頁面重排了100次；所以若遇到大模塊添加dom時，最好使用fragment
2.為button綁定事件監(jiān)聽器，并設置時間戳
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事件，實現(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();下面我們來通過時間戳分析一下這兩種方式的性能。
console.log(date2 - date1); console.log(date3 - date1);
通過改變button的數(shù)量，得到以下數(shù)據(jù)(單位：ms)：
在360兼容模式下：
當button數(shù)量為100時，平均為 6 0
當button數(shù)量為400時，平均為 20 0
當button數(shù)量為1000時，平均為 48 0
在新版谷歌下：
當button數(shù)量為1000時，平均為 3 0
可見當頁面中有大量元素需要綁定事件時，并不是所有的事件都會被觸發(fā)，而這時對所有需要監(jiān)聽的元素都綁定事件處理器無疑是要花費代價的，而通過事件委托的方式可以很好的解決性能問題，不需要為每個元素都綁定事件監(jiān)聽器。但是要寫一些邏輯代碼來判斷事件源。所以，如果你的web項目對性能要求極為苛刻，事件委托也不失于一種優(yōu)雅的選擇
關于“javascript中事件監(jiān)聽與事件委托怎么實現(xiàn)”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“javascript中事件監(jiān)聽與事件委托怎么實現(xiàn)”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
