JS冒泡事件與事件捕獲例項詳解

NO IMAGE

本文例項分析了JS冒泡事件與事件捕獲。分享給大家供大家參考,具體如下:

案例


<!DOCTYPE html>
<html>
<head>
<title>冒泡事件</title>
<script type="text/javascript">
window.onload = function(){
window.onclick = function(){
alert("Window"); // 頂級
};
document.onclick = function(){
alert("Document"); // 次頂級
};
document.documentElement.onclick = function(){
alert("Html"); // 次次頂級
};
document.body.onclick = function(){
alert("Body"); // 次次次頂級
};
document.getElementById("myDiv").onclick = function(){
alert("Div"); // 最先執行,並且會傳遞到上一層。點選兩次,則按順序執行兩次。如果上級也有點選事件的話
};
}
</script>
</head>
<body>
<div id="myDiv">點我</div>
</body>
</html>

小結

1.點選myDiv。依次是Div-Body-Html-Document-Window

2.點選其他空白地方。依次是Html-Document-Window

3.連續點選兩次,會按順序執行兩次

4.冒泡的前提是,父級也定義了相應的事件

再看一個更復雜的例子


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件捕捉</title>
<script type="text/javascript">
window.onload = function(){
window.addEventListener("click", function(){
alert("Window - true");
}, true); // true - 事件控制代碼在捕獲階段執行 ,false- false- 預設。事件控制代碼在冒泡階段執行
document.addEventListener("click", function(){
alert("Document - true");
}, true);
document.documentElement.addEventListener("click", function(){
alert("Html - true");
}, true);
document.body.addEventListener("click", function(){
alert("Body - true");
}, true);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - true");
}, true);
window.addEventListener("click", function(){
alert("Window - false");
}, false); // true - 事件控制代碼在捕獲階段執行 ,false- false- 預設。事件控制代碼在冒泡階段執行
document.addEventListener("click", function(){
alert("Document - false");
}, false);
document.documentElement.addEventListener("click", function(){
alert("Html - false");
}, false);
document.body.addEventListener("click", function(){
alert("Body - false");
}, false);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - false");
}, false);
window.onclick = function(){
alert("Window - click"); // 頂級
};
document.onclick = function(){
alert("Document - click"); // 次頂級
};
document.documentElement.onclick = function(){
alert("Html - click"); // 次次頂級
};
document.body.onclick = function(){
alert("Body - click"); // 次次次頂級
};
document.getElementById("myDiv").onclick = function(){
alert("Div - click"); // 最先執行,並且會傳遞到上一層。點選兩次,則按順序執行兩次。如果上級也有點選事件的話
};
}
</script>
</head>
<body>
<div id="myDiv">點我</div>
</body>
</html>

小結

1.點選的執行結果是

Window – true

Document – true

Html – true

Body – true

Div – true

Div – false

Div – click

Body – false

Body – click

Html – false

Html – click

Document – false

Document – click

Window – false

Window – click

2.順序與js程式碼順序無關

3.就算沒有定義點選事件,一樣可以捕獲點選事件,只要點選到,就能捕獲到

再次改造,阻止冒泡


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件捕捉</title>
<script type="text/javascript">
window.onload = function(){
document.addEventListener("click", function(){
alert("Document - true");
}, true);
window.addEventListener("click", function(){
alert("Window - true");
}, true); // true - 事件控制代碼在捕獲階段執行 ,false- false- 預設。事件控制代碼在冒泡階段執行
document.documentElement.addEventListener("click", function(){
alert("Html - true");
}, true);
document.body.addEventListener("click", function(){
alert("Body - true");
}, true);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - true");
}, true);
window.addEventListener("click", function(){
alert("Window - false");
}, false); // true - 事件控制代碼在捕獲階段執行 ,false- false- 預設。事件控制代碼在冒泡階段執行
document.addEventListener("click", function(){
alert("Document - false");
}, false);
document.documentElement.addEventListener("click", function(){
alert("Html - false");
}, false);
document.body.addEventListener("click", function(){
alert("Body - false");
}, false);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - false");
}, false);
window.onclick = function(){
alert("Window - click"); // 頂級
};
document.onclick = function(){
alert("Document - click"); // 次頂級
};
document.documentElement.onclick = function(){
alert("Html - click"); // 次次頂級
};
document.body.onclick = function(){
alert("Body - click"); // 次次次頂級
};
document.getElementById("myDiv").onclick = function(){
alert("Div - click"); // 最先執行,並且會傳遞到上一層。點選兩次,則按順序執行兩次。如果上級也有點選事件的話
event.stopPropagation(); // 阻止冒泡
};
}
</script>
</head>
<body>
<div id="myDiv">點我</div>
</body>
</html>

小結

Window – true

Document – true

Html – true

Body – true

Div – true

Div – false

Div – click

終止了,沒有後續的內容了

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題:《JavaScript事件相關操作與技巧大全》、《JavaScript時間與日期操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查詢演算法技巧總結》、《JavaScript動畫特效與技巧彙總》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結

希望本文所述對大家JavaScript程式設計有所幫助。

您可能感興趣的文章:

淺談javascript中的事件冒泡和事件捕獲JS中事件冒泡和事件捕獲介紹javaScript 事件繫結、事件冒泡、事件捕獲和事件執行順序整理總結js事件冒泡、事件捕獲和阻止預設事件詳解javascript事件冒泡和事件捕獲詳解js之事件冒泡和事件捕獲詳細介紹JavaScript中捕獲與冒泡詳解及例項js冒泡、捕獲事件及阻止冒泡方法詳細總結JS中繫結事件順序(事件冒泡與事件捕獲區別)js事件冒泡與事件捕獲詳解