js事件三階段與事件委託
阿新 • • 發佈:2018-11-28
首先明確一個概念,
js中事件包含三個階段:
- 捕獲
- 到達目標
- 冒泡
事件委託:將子元素上的事件委託給父元素監聽,從而無需對每一個子元素設定監聽事件。例如ul巢狀多個li,要點選時alert每個li的innerText
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
var ul=document.getElementById('ul'); function test(e){ console.log(e.target.innerText); } ul.addEventListener('click',test,false);
addEventListener(event, cb, true/false)
其中true代表捕獲階段執行,false代表冒泡階段執行(預設false)。
二者區別在於事件被執行於不同的階段,例如一個div>div的巢狀,捕獲執行則先外後內,冒泡階段先內後外
<div id="out">
<div id="inner"></div>
</div>
var out=document.getElementById('out'); out.addEventListener('click',()=>{alert('out')},true); var inner=document.getElementById('inner'); inner.addEventListener('click',()=>{alert('inner')},true);