溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JavaScript中事件冒泡和事件捕獲的案例，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
JS事件流原理圖：
由此可知道，一個完整的JS事件流是從window開始，最后回到window的一個過程；事件流被分為三個階段：捕獲過程（1~5）、目標過程（5~6）、冒泡過程（6~10）；
事實上，捕獲過程和冒泡過程是完全相反的過程，即事件由父元素向子元素傳播和子元素向父元素傳播的過程。
事件捕獲
事件捕獲在事件綁定的第二種形式下才能實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件捕獲</title>
<style>
div{padding:40px;}
#div1{
background: red;
}
#div2{
background:green;
}
#div3{background: blue;}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var oDiv3=document.getElementById('div3');
function fn1(){
alert(this.id);
}
//點擊div3部分時，分別彈出div1，div2，div3
oDiv1.addEventListener('click',fn1,true);//為true時，是事件捕獲 false=冒泡
oDiv2.addEventListener('click',fn1,true);
oDiv3.addEventListener('click',fn1,true);
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>上面例子中，點擊p3時，p1會接收到兩個點擊事件，一個是在捕獲階段觸發了p1的點擊事件，一個是在冒泡階段觸發了p1的點擊事件；addEventListener中的第三個參數：true----捕獲，false-----冒泡；上面設置為true即捕獲階段的點擊事件被觸發了
注：p1會接收到兩個點擊事件與是否觸發該事件無關
再來個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件捕獲</title>
<style>
div{padding:40px;}
#div1{
background: red;
}
#div2{
background:green;
}
#div3{background: blue;}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var oDiv3=document.getElementById('div3');
oDiv1.addEventListener('click',function(){
alert(1);
},false);
oDiv1.addEventListener('click',function(){
alert(3);
},true);
oDiv3.addEventListener('click',function(){
alert(2);
},false);
//點擊div3，分別彈出3,2,1
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>點擊p3，查看彈出的結果分別是：3、2、1
點擊p3時，p1會接收到兩個點擊事件，在捕獲階段（true），觸發了p1的點擊事件，彈出結果：3；在冒泡階段，觸發了p3的點擊事件，彈出結果：2，然后觸發了p1的點擊事件，彈出結果：1
事件冒泡
當一個元素接受到事件的時候，會把它接收到的所有事件傳播給它的父級，一直到頂層window，叫事件冒泡機制；
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style>
div{padding:40px;}
#div1{
background: red;
}
#div2{
background:green;
}
#div3{background: blue;}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var oDiv3=document.getElementById('div3');
function fn1(){
alert(this.id);
}
//事件函數綁定
oDiv1.onclick=fn1;//告訴div1，如果它接收到了一個點擊事件，那它就去執行fn1
oDiv2.onclick=fn1;
oDiv3.onclick=fn1;//div3,div1 事件冒泡
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>阻止冒泡：在當前要阻止冒泡的事件函數中調用event.cancelBubble=true;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阻止冒泡</title>
<style>
#div1{
width:100px;
height:200px;
border:1px solid red;
display: none;
}
</style>
<script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
oBtn.onclick=function(ev){
var oEvent=ev||event;
//阻止當前事件函數事件冒泡
oEvent.cancelBubble=true;
oDiv.style.display='block';
}
document.onclick=function(){
/* setTimeout(function(){//觀察事件冒泡：div出現一秒鐘后隱藏了
oDiv.style.display='none';
},1000);*/
oDiv.style.display='none';
}
}
</script>
</head>
<body>
<input type="button" value="按鈕" id="btn1">
<div id="div1">點擊按鈕div就出現，點擊除按鈕以外的部分div就消失</div>
</body>
</html>對比沒有取消冒泡事件時的效果，下面用了延時器一遍觀察效果
事件冒泡的運用
下面是一個網站中常見的功能——分享到
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style>
#div1{
width:100px;
height:200px;
background: red;
position: absolute;
left:-100px;
top:100px;
}
#div2{
width:30px;
height:60px;
position: absolute;
right:-30px;
top:70px;
background:#000000;
color:#ffffff;
text-align: center;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
this.style.left=0+'px';//鼠標移動到div2時，div2接收到over、out事件時它自己不做，傳播給父級div1執行
}
oDiv.onmouseout=function(){
this.style.left=-100+'px';
}
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">分享到</div>
</div>
</body>
</html>感謝你能夠認真閱讀完這篇文章，希望小編分享的“JavaScript中事件冒泡和事件捕獲的案例”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
