挖洞與冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="z">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
color: white;
}
</style>
</head>
<body>
<section>
<div>
<a href="javascript:void(0);">能夠點擊</a>
</div>
</section>
<script>
var sec = document.querySelector("section");
var div = document.querySelector("div");
var a = document.querySelector('a');
//addEventListener(1,2,3)
// 第三個參數是能夠選擇的，表示事件在哪一個階段執行，它的取值是true(false)，
// 默認是false false 表明冒泡
// true 表明挖洞 事件的兩個階段 挖洞和冒泡
// 挖洞（捕獲）：從dom 跟結點向裏面找，直到找到了添加的監聽事件的元素
// 冒泡：和挖洞相反的過程
// 能夠選擇是挖洞或者冒泡階段的監聽事件
div.addEventListener("click",function(){
});
document.documentElement.addEventListener("click",function(){
console.log("HTML 挖洞");
setTimeout(function(){
div.style.backgroundColor = 'green';
},1000)
},true);
document.documentElement.addEventListener("click",function(){
console.log("HTML 冒泡");
setTimeout(function(){
div.style.backgroundColor = 'pink';
},2000)
},false);
document.body.addEventListener("click",function(){
console.log("body 挖洞");
},true);
document.body.addEventListener("click",function(){
console.log("body 冒泡");
},false);
sec.addEventListener("click",function(event){
console.log("section 挖洞");
// stopPropagetion() 能夠中止事件的傳播
// 不會影響同級別的監聽事件
// event.stopPropagation();
// stopImmediatePropagation() 馬上中止
// event.stopImmediatePropagation();
},true);
sec.addEventListener("click",function(){
console.log("section-2 挖洞");
},true);
sec.addEventListener("click",function(){
console.log("section 冒泡");
},false);
div.addEventListener("click",function(){
console.log("div 挖洞");
},true);
div.addEventListener("click",function(){
console.log("div 冒泡");
},false);
a.addEventListener("click",function(){
console.log("a 挖洞");
},true);
a.addEventListener("click",function(){
console.log("a 冒泡");
},false);
</script>
</body>
</html>
相關文章
- 1. js事件冒泡與阻止冒泡
- 2. 捕獲與冒泡
- 3. 冒泡
- 4. 事件冒泡 == 得與失
- 5. 遞歸與冒泡排序
- 6. 事件冒泡與捕獲
- 7. 常規冒泡與快排
- 8. 事件冒泡與阻止事件冒泡
- 9. 小程序學習之冒泡事件與非冒泡事件
- 10. 小程序的事件機制（冒泡與非冒泡）
- 更多相關文章...
- • XSL-FO 與 XSLT - XSL-FO 教程
- • PHP - AJAX 與 PHP - PHP教程
- • Composer 安裝與使用
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. js事件冒泡與阻止冒泡
- 2. 捕獲與冒泡
- 3. 冒泡
- 4. 事件冒泡 == 得與失
- 5. 遞歸與冒泡排序
- 6. 事件冒泡與捕獲
- 7. 常規冒泡與快排
- 8. 事件冒泡與阻止事件冒泡
- 9. 小程序學習之冒泡事件與非冒泡事件
- 10. 小程序的事件機制（冒泡與非冒泡）