一個(gè)事件的處理過程主要有三個(gè)階段：捕獲欺缘、目標(biāo)、冒泡氯葬。
- 捕獲階段：當(dāng)我們?cè)?DOM 樹的某個(gè)節(jié)點(diǎn)發(fā)生了一些操作（例如單擊、鼠標(biāo)移動(dòng)上去）婉陷，就會(huì)有一個(gè)事件發(fā)射過去帚称。這個(gè)事件從 Window 發(fā)出，不斷經(jīng)過下級(jí)節(jié)點(diǎn)直到觸發(fā)的目標(biāo)節(jié)點(diǎn)秽澳。在到達(dá)目標(biāo)節(jié)點(diǎn)之前的過程闯睹，就是捕獲階段（Capture Phase）。（所有經(jīng)過的節(jié)點(diǎn)担神，都會(huì)觸發(fā)這個(gè)事件楼吃。捕獲階段的任務(wù)就是建立這個(gè)事件傳遞路線，以便后面冒泡階段順著這條路線返回 Window妄讯。）
- 目標(biāo)階段：當(dāng)事件不斷的傳遞直到目標(biāo)節(jié)點(diǎn)的時(shí)候孩锡，最終在目標(biāo)節(jié)點(diǎn)上觸發(fā)這個(gè)事件，就是目標(biāo)階段亥贸。
- 冒泡階段：事件冒泡即事件開始時(shí)躬窜，由最具體的元素接收（也就是事件發(fā)生所在的節(jié)點(diǎn)），然后逐級(jí)傳播到較為不具體的節(jié)點(diǎn)（我們平時(shí)用的事件綁定就是利用的事件冒泡的原理）
- 事件捕獲: 事件捕獲指的是從document到觸發(fā)事件的那個(gè)節(jié)點(diǎn)砌函，即自上而下的去觸發(fā)事件斩披。
- 事件冒泡：事件冒泡剛好相反，是從觸發(fā)事件的那個(gè)節(jié)點(diǎn)一直到document讹俊，是自下而上的去觸發(fā)事件垦沉。
- 事件委托：利用了事件冒泡的原理，在下方通過實(shí)例講解
- 阻止事件委托和冒泡：在事件函數(shù)中執(zhí)行event.stopPropagation()
實(shí)例講解：
<div id="parent">
<div id="child" class="child"></div>
</div>
<script type="text/javascript">
document.getElementById("parent").addEventListener("click",function(e){
console.log("parent事件被觸發(fā)仍劈，"+this.id);
});
document.getElementById("child").addEventListener("click",function(e){
console.log("child事件被觸發(fā)厕倍，"+this.id);
});
</script>
上述代碼都是采用的事件冒泡機(jī)制：
-
點(diǎn)擊孩子元素，先孩子元素再父親元素
image.png -
點(diǎn)擊父親元素
image.png
<script type="text/javascript">
document.getElementById("parent").addEventListener("click",function(e){
console.log("parent事件被觸發(fā)贩疙，"+this.id);
},true);
document.getElementById("child").addEventListener("click",function(e){
console.log("child事件被觸發(fā)讹弯，"+this.id);
},true);
</script>
上述代碼都是采用的事件捕獲機(jī)制：
-
點(diǎn)擊孩子元素，先父親元素再孩子元素
image.png -
點(diǎn)擊父親元素
image.png
事件委托
當(dāng)有多個(gè)類似的元素需要綁定事件時(shí)这溅，一個(gè)一個(gè)去綁定即浪費(fèi)時(shí)間组民，又不利于性能，這時(shí)候就可以用到事件委托悲靴，給他們的一個(gè)共同父級(jí)元素添加一個(gè)事件函數(shù)去處理他們所有的事件情況.
<ul id="1ist">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
document.getElementById('1ist').addEventListener('click',function(e){
e.target.innerHTML = "被點(diǎn)擊";
});
上述代碼才用事件委托機(jī)制臭胜，雖然我們沒有給每個(gè)li綁定事件,我們綁定事件的時(shí)候是采用的默認(rèn)的冒泡，所以可以理解為點(diǎn)擊之后冒泡執(zhí)行的；
-
點(diǎn)擊li元素
image.png
