JavaScript中的事件代理
阿新 • • 發佈:2018-12-30
首先,事件有三個階段:捕獲、目標、冒泡(不瞭解的自行搜尋)。
那麼,當我需要給ul下1000個li都要繫結點選事件,應該用for迴圈遍歷?答案當然no。就算可以,但是你要明白,這麼做是要承擔足夠大的效能風險,因為首先你得用getElementByTagName("li")獲取1000個li,返回得到一個動態陣列,然後遍歷該陣列。要知道,DOM操作返回的dom雖然是陣列,但是卻沒有不同的new Array()得到的陣列效能好,遍歷的時候,會造成效能問題。
那麼,怎麼解決“繫結點選事件“這個問題呢?
我們是否可以將點選事件繫結到ul上,當點選任一li的時候,事件會冒泡,觸發父級元素ul的點選事件,這樣的話,我們關注的焦點就變為,如何在ul的點選事件中知曉點選了哪一個li。
其實很簡單,獲取事件的目標即可,如下程式碼
window.onload = function(){ var oUi = document.getElementsByTagName("ul"); oUi[0].onclick = function(e){ var e = e || window.event; var target = e.target || e.srcElement; if(target.tagName.toLowerCase() == "li"){ alert(target.nodeName); target.innerText = "hello"; } } }
這就是比較簡單的事件代理。
其一、減少記憶體中事件處理器,這樣會提高頁面載入的效能,減少頁面崩潰的可能
其二、如果動態生成某個元素,並且需要為此元素繫結事件的時候,利用事件代理會減少程式碼的冗長。
同樣,a coin has two sides.
它也可能會帶來效能瓶頸:
其一、並不是所有事件都是冒泡的,如blur、focus、load、unload等等並不能像其他事件一樣冒泡,實際上,blur和focus是屬於捕獲事件。
其二、在對滑鼠mouseout、mouserover等情況下,會出現很怪異的問題。