<!--
事件委托：
所有 li 的點擊事件委托給document元素遂黍，
ul 中可隨時添加 li 元素哼凯，都會自動冒泡觸發(fā) document 的 click 事件吉嫩，
打印出點擊的 li 的相關(guān)數(shù)據(jù)。
在 jQuery 中寫法：$(document).on('click', 'li', function (e) {})
-->
<ul>
<li class="a1">00001</li>
<li class="a2">00002</li>
<li class="a3">00003</li>
<li class="a4">00004</li>
<li class="a5">00005</li>
</ul>
<script>
document.addEventListener('click',function (e) {
var eve = e || window.event; // IE9和IE10兼容event寫法
if (eve.target.nodeName === "LI"){
var el = eve.target;
console.log(el.innerHTML); // 點哪個li打印哪個li的innerHTML
console.log(el.getAttribute('class')); // 點哪個li打印哪個li的class
}
})
</script>
- 事件委托(事件代理)的作用?
- 支持為同一個DOM元素注冊多個同類型事件
- 可將事件分成事件捕獲和事件冒泡機(jī)制
- 注冊多個事件
<div id="div1"></div>
window.onload = function(){
let div1 = document.getElementById('div1');
div1.onclick = function(){
console.log('打印第一次')
}
div1.onclick = function(){
console.log('打印第二次')
}
}
// 運行結(jié)果是：“打印第二次”
// 可以看到第二個點擊注冊事件覆蓋了第一個注冊事件,只執(zhí)行了console.log('打印第二次');
<div id="div1"></div>
window.onload = function(){
let div1 = document.getElementById('div1');
div1.addEventListener('click',function(){
console.log('打印第一次')
})
div1.addEventListener('click',function(){
console.log('打印第二次')
})
}
// 運行結(jié)果是：“打印第一次 打印第二次”
// 可以看到兩個注冊事件都成功觸發(fā)了。 useCapture是事件委托的關(guān)鍵,我們后面詳解
- 事件捕獲和事件冒泡機(jī)制
- 事件捕獲
當(dāng)一個事件觸發(fā)后,從Window對象觸發(fā),不斷經(jīng)過下級節(jié)點,直到目標(biāo)節(jié)點恼除。在事件到達(dá)目標(biāo)節(jié)點之前的過程就是捕獲階段。所有經(jīng)過的節(jié)點,都會觸發(fā)對應(yīng)的事件 -
事件冒泡
當(dāng)事件到達(dá)目標(biāo)節(jié)點后，會沿著捕獲階段的路線原路返回沙庐。同樣，所有經(jīng)過的節(jié)點,都會觸發(fā)對應(yīng)的事件
image.png - 舉例
//當(dāng)useCapture為默認(rèn)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')
})
}
//結(jié)果:打印div1 打印body
//當(dāng)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')
})
}
//結(jié)果:打印body 打印div1
- 事件委托的優(yōu)點
- 提高性能：每一個函數(shù)都會占用內(nèi)存空間佳吞，只需添加一個事件處理程序代理所有事件,所占用的內(nèi)存空間更少轨功。
- 動態(tài)監(jiān)聽：使用事件委托可以自動綁定動態(tài)添加的元素,即新增的節(jié)點不需要主動添加也可以一樣具有和其他元素一樣的事件。
- 事件委托和新增節(jié)點綁定事件的關(guān)系
<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>
image.png
- 雖然沒有給div1和div2添加點擊事件,但是無論是點擊div1還是div2,都會打印當(dāng)前節(jié)點容达。因為其父級綁定了點擊事件,點擊div1后冒泡上去的時候,執(zhí)行父級的事件古涧。
- 這樣無論后代新增了多少個節(jié)點,一樣具有這個點擊事件的功能。
