本文實例講述了javascript事件監(jiān)聽與事件委托。分享給大家供大家參考，具體如下：
事件監(jiān)聽與事件委托
在js中，常用到element.addEventListener()來進(jìn)行事件的監(jiān)聽。但是當(dāng)頁面中存在大量需要綁定事件的元素時，這種方式可能會帶來性能影響。此時，我們可以用事件委托的方式來進(jìn)行事件的監(jiān)聽。
每個事件都經(jīng)歷三個階段
事件委托需要用到事件的冒泡，冒泡就是事件發(fā)生時，上層會一層一層的接收這個事件。
如下頁面結(jié)構(gòu)：
<body> <div id="div1"> <div id="div2"> <button>按鈕</button> </div> </div></body>
當(dāng)點擊按鈕，首先button接收到事件，然后向上層冒泡，接著id="div1"接收到事件，接著是id="div2"，一直到達(dá)document的頂層。
所以可以添加一個事件處理器到父級，由他接收所有子節(jié)點的事件信息。這就是事件委托。
事件監(jiān)聽與事件委托性能比較
通過構(gòu)建若干個button元素，并為其綁定事件監(jiān)聽器來比較事件監(jiān)聽與事件委托的性能。
1.構(gòu)建若干個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)聽器，并設(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事件，實現(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兼容模式下：
在新版谷歌下：
可見當(dāng)頁面中有大量元素需要綁定事件時，并不是所有的事件都會被觸發(fā)，而這時對所有需要監(jiān)聽的元素都綁定事件處理器無疑是要花費代價的，而通過事件委托的方式可以很好的解決性能問題，不需要為每個元素都綁定事件監(jiān)聽器。但是要寫一些邏輯代碼來判斷事件源。所以，如果你的web項目對性能要求極為苛刻，事件委托也不失于一種優(yōu)雅的選擇
PS：這里再為大家附上javascript系統(tǒng)自帶事件參考表供大家參考查詢：
javascript事件與功能說明大全：
http://tools.VeVB.COm/table/javascript_event
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
新聞熱點
疑難解答
