js事件冒泡與捕捉解析

最後更新：2017-07-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：lis set 證明一個 image width 說明事件整合

js的事件的冒泡與捕捉，簡單來說就像個V型，從最高層body開始捕捉事件，然後一層一層往下開始捕捉，底層捕捉到事件後進行處理，然後再一層層冒泡傳給父級，父級再傳到它的父級，如果沒有阻止冒泡，事件會一直傳回給body，整個下來如所示：

下面的例子可以證明事件的冒泡與捕捉的過程：
在此例中我們用到一個js函數：
addEventListener(event,listener,userCapture)
其中：event:就是監聽的事件 listener:即要執行監聽的函數 userCapture: false的時候是冒泡， true表示是捕獲。

1.事件捕獲
A：
<!DOCTYPE html>
<html>
<head>
<title>bubble</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#parent {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="parent">
parent
<button id="child">child</button>
</div>
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.body.addEventListener("click",function(e){
console.log("body-capture");
},true);
parent.addEventListener("click",function(e){
console.log("parent-capture");
},true);
child.addEventListener("click",function(e){
console.log("child-capture");
},true);
</script>
</body>
</html>
上面代碼輸出的結果是：
body-capture
parent-capture
child-capture
說明事件的捕獲是從上級往下捕獲的。

2.事件冒泡
B：
<!DOCTYPE html>
<html>
<head>
<title>bubble</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#parent {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="parent">
parent
<button id="child">child</button>
</div>
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.body.addEventListener("click",function(e){
console.log("click-body");
},false);
parent.addEventListener("click",function(e){
console.log("click-parent");
},false);
child.addEventListener("click",function(e){
console.log("click-child");
},false);
</script>
</body>
</html>

輸出結果：
click-child
click-parent
click-body
事件冒泡從下級往上級冒泡

將上面的代碼整合起來：
C：
出<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>bubble</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#parent {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="parent">
parent
<button id="child">child</button>
</div>
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.body.addEventListener("click",function(e){
alert("click-body");
},false);
parent.addEventListener("click",function(e){
alert("click-parent");
},false);
child.addEventListener("click",function(e){
alert("click-child");
},false);
document.body.addEventListener("click",function(e){
alert("body-capture");
},true);
parent.addEventListener("click",function(e){
alert("parent-capture");
},true);
child.addEventListener("click",function(e){
alert("child-capture");
},true);
</script>
</body>
</html>
輸結果：
body-capture
parent-capture
click-child
child-capture
click-parent
click-body
事件是先捕獲後冒泡，如上面所說的V型

3.阻止冒泡/阻止捕獲

阻止冒泡需要 stopPropogation()函數
上栗B處代碼，如果要在child執行完之後，阻止像parent冒泡則只需要將：
child.addEventListener("click",function(e){
console.log("click-child");
},false);
改為：
child.addEventListener("click",function(e){
console.log("click-child");
e.stopPropagation();
},false);

此時輸出的結果就是：
click-child

阻止捕獲也是同樣方法，用stopPropogation()函數

將上栗A中的代碼：
document.body.addEventListener("click",function(e){
console.log("click-body");
},false);
改為：
document.body.addEventListener("click",function(e){
console.log("body-capture");
e.stopPropagation();
},true);
則輸出的結果是：
body-capture
body的下級就不能捕捉事件，捕捉不到事件，自然也就不能冒泡了。

以上是我對事件的冒泡和捕捉的理解，沒有考慮不同瀏覽器對其的支援，以及不同瀏覽器處理的差別問題。
如有錯誤，歡迎指出
如有問題，歡迎提問

js事件冒泡與捕捉解析

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More