一、寫在前頭
接到某廠電話問什么是事件代理的時候,一開始說addEventListener,然后他說直接綁定新的元素不會報dom不存在的錯誤嗎？然后我就混亂了,我印象中這個方法是可以綁定新節點的。后面才知道,原來他要考察的是事件委托(代理)的原理,他指的是未來還不清楚會創建多少個節點,所以沒辦法實現給他們注冊事件。
二、事件委托(事件代理)的作用?
為了方便理解,我先把事件委托的作用寫一下。
- 支持為同一個DOM元素注冊多個同類型事件
- 可將事件分成事件捕獲和事件冒泡機制
例子解析:
- 注冊多個事件
用以往注冊事件的方法,如果存在多個事件,后注冊的事件會覆蓋先注冊的事件
//index.html
<div id="div1"></div>
window.onload = function(){
let div1 = document.getElementById('div1');
div1.onclick = function(){
console.log('打印第一次')
}
div1.onclick = function(){
console.log('打印第二次')
}
}
可以看到第二個點擊注冊事件覆蓋了第一個注冊事件,只執行了console.log('打印第二次');
用addEventListener(type,listener,useCapture)實現
- type: 必須,String類型,事件類型
- listener: 必須,函數體或者JS方法
- useCapture: 可選,boolean類型。指定事件是否發生在捕獲階段。默認為false,事件發生在冒泡階段
<div id="div1"></div>
window.onload = function(){
let div1 = document.getElementById('div1');
div1.addEventListener('click',function(){
console.log('打印第一次')
})
div1.addEventListener('click',function(){
console.log('打印第二次')
})
}
可以看到兩個注冊事件都成功觸發了。 useCapture是事件委托的關鍵,我們后面詳解
- 事件捕獲和事件冒泡機制
- 事件捕獲
當一個事件觸發后,從Window對象觸發,不斷經過下級節點,直到目標節點。在事件到達目標節點之前的過程就是捕獲階段。所有經過的節點,都會觸發對應的事件 - 事件冒泡
當事件到達目標節點后，會沿着捕獲階段的路線原路返回。同樣，所有經過的節點,都會觸發對應的事件
通過例子理解兩個事件機制:
例子：假設有body和body節點下的div1均有綁定了一個注冊事件.
效果：
當為事件捕獲(useCapture:true)時,先執行body的事件,再執行div的事件
當為事件冒泡(useCapture:false)時,先執行div的事件,再執行body的事件
//當useCapture為默認false時,為事件冒泡
<body>
<div id="div1"></div>
</body>
window.onload = function(){
let body = document.querySelector('body');
let div1 = document.getElementById('div1');
body.addEventListener('click',function(){
console.log('打印body')
})
div1.addEventListener('click',function(){
console.log('打印div1')
})
}
//結果:打印div1 打印body
//當useCapture為true時,為事件捕獲
<body>
<div id="div1"></div>
</body>
window.onload = function(){
let body = document.querySelector('body');
let div1 = document.getElementById('div1');
body.addEventListener('click',function(){
console.log('打印body')
},true)
div1.addEventListener('click',function(){
console.log('打印div1')
})
}
//結果:打印body 打印div1
三、事件委托和新增節點綁定事件的關系？
事件委托的優點:
- 提高性能:每一個函數都會占用內存空間，只需添加一個事件處理程序代理所有事件,所占用的內存空間更少。
- 動態監聽:使用事件委托可以自動綁定動態添加的元素,即新增的節點不需要主動添加也可以一樣具有和其他元素一樣的事件。
例子解析:
<script>
window.onload = function(){
let div = document.getElementById('div');
div.addEventListener('click',function(e){
console.log(e.target)
})
let div3 = document.createElement('div');
div3.setAttribute('class','div3')
div3.innerHTML = 'div3';
div.appendChild(div3)
}
</script>
<body>
<div id="div">
<div class="div1">div1</div>
<div class="div2">div2</div>
</div>
</body>
雖然沒有給div1和div2添加點擊事件,但是無論是點擊div1還是div2,都會打印當前節點。因為其父級綁定了點擊事件,點擊div1后冒泡上去的時候,執行父級的事件。
分別點擊div1、div2、div3
這樣無論后代新增了多少個節點,一樣具有這個點擊事件的功能。這一個就是考察者想要聽到的答案。