js事件委托也叫事件代理
2020/11/13 12:00:58 閱讀：2690
發布者：2690
事件委托也叫事件代理，簡單點說就是，把事件綁定到父級上，監聽子元素的冒泡事件
在利用事件委托的時候，我們還必須要知道一個概念：事件對象下的事件源
事件源：在事件中，當前操作的那個元素就是事件源。比如我們點擊a標簽發生onclick事件時，事件源就是a標簽，當點擊li發生onclick事件時，那么事件源就是li
window.onload = function(){
var oUl = document.getElementById('ull');
var aLi = document.getElementsByTagName('li'); //獲取所有列
for(var i =0;i < aLi.length;i++){
aLi[i].onmouseover = function(){ this.style.background = "red"; }
}
當然這樣一看代碼也沒什么問題，通過循環給每個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,同樣有這個事件。原理也很容易相同，因為事件是加在父親上面的，父親在，事件在
