事件冒泡和事件捕獲
事件監聽函數
addEventListener(‘ev’,fn,[Boolean,{}])
它有三個參數
第一個參數：執行事件的名稱
第二個參數：fn函數
第三個參數：傳遞有兩種形式：Boolean或者一個對象
默認第三個參數是 false （不捕獲，因此該函數默認是冒泡執行的），第三個參數：如果是布爾值：true 是進行捕獲執行， false 不捕獲
事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 200px;
width: 200px;
background: red;
}
p{
width: 100px;
height: 100px;
background: blueviolet;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<script>
{
let div = document.querySelector("div");
let p = document.querySelector("p");
div.addEventListener("click",()=>{
alert("div");
});
p.addEventListener("click",()=>{
alert("p");
});
}
</script>
</body>
</html>
事件冒泡的執行順序 ： 由小到大 p > div > body > html
事件捕獲
{
let div = document.querySelector("div");
let p = document.querySelector("p");
div.addEventListener("click",()=>{
alert("div");
},true);
p.addEventListener("click",()=>{
alert("p");
},true);
}
事件捕獲： 由大到小 html > body > div > p
實際捕獲和冒泡是反着進行的
事件捕獲：當事件發生時，最先得到通知的是window，然後是document，由上至下逐級依次而入，直到真正觸發事件的那個元素(目標元素)爲止，這個過程就是捕獲。
事件冒泡：事件會從目標元素開始起泡，由下至上逐級依次傳播，直到window對象爲止，這個過程就是冒泡。
同時事件監聽函數的 第三個參數 還可以 傳遞對象：{}
capture:true/false 是否在捕獲階段執行
once:true/false 只執行一次事件
{
let div = document.querySelector("div");
let p = document.querySelector("p");
// document.addEventListener('click',function(){
// alert('document');
// });
// document.body.addEventListener('click',function(){
// alert('body')
// });
div.addEventListener("click",()=>{
alert("div");
});
p.addEventListener("click",()=>{
alert("p");
},{
capture:true
});
}
是冒泡的執行形式：
let div = document.querySelector("div");
let p = document.querySelector("p");
// div.addEventListener("click",()=>{
// alert("div");
// });
div.addEventListener('click',function(){
alert('div');
},{
capture:true
});
p.addEventListener("click",()=>{
alert("p");
},{
capture:true
});
是捕獲的執行形式：
let div = document.querySelector("div");
let p = document.querySelector("p");
div.addEventListener('click',function(){
alert('div');
},{
once:true
});
p.addEventListener("click",()=>{
alert("p");
});
div的點擊事件只執行一次。
（後續待補充）