事件流什么是事件流：每個(gè)事件發(fā)生時(shí)，都會有一個(gè)觸發(fā)并執(zhí)行的過程，也就是事件的傳播過程，我們稱為事件流；簡單來說，事件事件流就是事件從發(fā)生到執(zhí)行結(jié)束的流程。 ? 事件流的三個(gè)階段：捕獲階段，目標(biāo)階段，冒泡階段。事件捕獲階段：事件開始由頂層元素觸發(fā)，然后逐級向下傳播，直到目標(biāo)元素，依次執(zhí)行其身上邦定的事件； 事件目標(biāo)階段（處理階段）：觸發(fā)當(dāng)前自身的事件； 事件冒泡階段：事件由目標(biāo)元素先接收，然后逐級向上傳播，達(dá)到最頂層元素，依次執(zhí)行其身上綁定的事件。 ?事件流模型
?
事件執(zhí)行的流程是先捕獲階段→再目標(biāo)元素階段→最后冒泡階段。
目標(biāo)元素的事件是在目標(biāo)階段執(zhí)行，其他事件會在冒泡階段執(zhí)行。每個(gè)事件只會執(zhí)行一次，也就是說如果在冒泡階段執(zhí)行了事件，就不會在捕獲階段執(zhí)行。
?
案例：
設(shè)置大中小三個(gè)盒子的點(diǎn)擊事件
<style>
#big{
width: 300px;
height: 300px;
border:1px solid #000;
background:orange;
}
#middle{
width: 200px;
height: 200px;
background: #abcdef;
}
#small{
width: 100px;
height: 100px;
background: red;
}
</style>
<body>
<div id="big">
大
<div id="middle">
中
<div id="small">
小
</div>
</div>
</div>
</body>
<script>
big.onclick=function(){
console.log(this.innerText);
console.log("點(diǎn)擊大盒子");
}
middle.onclick=function(){
console.log(this.innerText);
console.log("點(diǎn)擊中盒子");
}
small.onclick=function(){
console.log(this.innerText);
console.log("點(diǎn)擊小盒子");
}
</script>
效果
? 當(dāng)我們點(diǎn)擊小盒子觸發(fā)點(diǎn)擊事件時(shí)，發(fā)現(xiàn)中盒子跟大盒子的點(diǎn)擊事件也被觸發(fā)了：
? ? ? 當(dāng)我們點(diǎn)擊中盒子觸發(fā)點(diǎn)擊事件時(shí)，發(fā)現(xiàn)大盒子的點(diǎn)擊事件也被觸發(fā)了：
? ? ? 點(diǎn)擊大盒子時(shí)只觸發(fā)了大盒子的點(diǎn)擊事件
? 上面的情況說明：點(diǎn)擊小盒子，發(fā)現(xiàn)小盒子事件完畢后，中盒子的事件也被觸發(fā)了，接著大盒子的事件也被觸發(fā)了。這就是說目標(biāo)元素的事件在目標(biāo)階段執(zhí)行，其他事件會在冒泡階段執(zhí)行。 ? 總之總結(jié)成一張圖更好理解：
? ? ? ? 那么如何讓事件在捕獲階段執(zhí)行呢？ 需要使用另外一種事件綁定方式解決點(diǎn)擊小盒子會同時(shí)觸發(fā)中大盒子的點(diǎn)擊事件。 使用addEventListener()；解決； 如何使用addEventListener()方法： obj.addEventListener(type,handle,false); ? 把script中的代碼改成： document.getElementById("small").addEventListener("click",Click,true);
function Click(){
console.log(this.innerText);
}
效果：
這樣就解決了當(dāng)觸發(fā)小盒子事件時(shí)同時(shí)觸發(fā)大盒子中盒子也會觸發(fā)點(diǎn)擊事件的問題了。 來源：https://www./content-4-735501.html |
|
|
