本文主要和大家分享JS事件委託實例詳解,先看看解析,事件委託:也稱事件代理 就是利用冒泡的原理 把加事件加到父級上,觸發執行效果。
首先呢,你一定寫過這樣的程序,有一個列表,當滑鼠移入每個li,背景顏色變紅,於是我們寫出了這樣的程式碼:
(我給的程式碼一般都寫的重點程式碼,html大家可以自行寫哈。)
window.onload = oUl = document.getElementById('ull' aLi = document.getElementsByTagName('li'); ( i =0;i < aLi.length;i++=
當然這樣一看程式碼也沒什麼問題,透過循環給每個li加事件,但想一想如果我們有很多個li,是不是要加很多次事件,這樣其實是非常耗性能的。那我們會想,能不能只加一個事件就能實現。當然是能的,不然我就不會在這扯了。
那就是透過冒泡原理進行事件委託,我們可以把事件只加給父級oUL,這樣不管移入哪個li,都會觸發父級的移入事件,(對冒泡不太理解的,可以參考我的JS冒泡的文章),但這個時候也有個問題,因為我的需求是,讓對應的li變顏色,不是讓整個列表變,它怎麼知道我滑鼠移入的是哪個LI,這個時候萬能的事件物件中的一個屬性就要出場了,就是事件來源(不管事件綁定在那個元素中都指的是實際觸發事件的那個的目標),就是能獲取到你當前滑鼠所在的LI,
不過這個有相容性問題,IE和標準下不同,標準指的就是比較新版本的那些瀏覽器了
IE:window.event.srcElement
標準:event. target
所以需要做下相容,也很簡單。
下面看下整體程式碼:
window.onload = function(){ var oUl = document.getElementById('ull'); var aLi = document.getElementsByTagName('li'); oUl.onmouseover = function(ev){ var event = ev||window.event; // 获取event对象 var target = ev.target || ev.srcElement; // 获取触发事件的目标对象 if(target.nodeName.toLowerCase() == 'li'){ //判断目标对象是不是li target.style.background = 'red'; } } 代码中加了一个标签名的判断,主要原因是如果不加判断,当你鼠标移入到父级oUL上面的时候,整个列表就会变红,这不是我们想要的结果,所以要判断一下。
target.nodeName 弹出的名字是大写的,所以需要转换大小写再比较。
整個需求這樣就完成了,而且當清單很多的時候大大的提高了效能。
其實事件委託還有第二個優點:就是新加入的元素還會有先前的事件
假定我們又有一個需求,點選某個按鈕,可以在列表中再創建一個li,這個時候一般方法,因為新創建的li沒有加事件,所以是不具備移入變紅的功能的,但是用事件委託的方法,新的li,同樣有這個事件。原理也很容易相同,因為事件是加在父親上面的,父親在,事件在,大家可以自己測試一下。
相關推薦:
#########################################################以上是JS事件委託實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!