兩者概念
-
事件捕獲指的是從document到觸發事件的那個節點,即自上而下的去觸發事件。,
element.addEventListener(event,function(),false);
-
事件冒泡是自下而上的去觸發事件。綁定事件方法的第三個參數,就是控制事件觸發順序是否爲事件捕獲。
element.addEventListener(event,function(),true);
-
從上面可知,第三個參數爲
true
或者false
;true
,事件捕獲;false
,事件冒泡。- 默認
false
,即事件冒泡。
-
Jquery的
e.stopPropagation
會阻止冒泡,意思就是到我爲止,我的爹和祖宗的事件就不要觸發了。
案例分析
這是HTML結構:一個父級容器中套着一個子集容器
<div class="parent">
<div class="child"></div>
</div>
接下來給它們綁定上事件:
document.querySelector(".parent").addEventListener("click",function(e){
alert("parent事件被觸發,"+this.id);
})
document.querySelector(".child").addEventListener("click",function(e){
alert("child事件被觸發,"+this.id)
})
擴展:
-
querySelector()
方法返回文檔中匹配指定 CSS 選擇器的一個元素;
只會返回第一個符合要求的。比如兩個class="parent"
;
document.querySelector('.parent')
只會查詢第一個符合要求的。 -
querySelectorAll()
方法返回文檔中匹配指定 CSS 選擇器的所有元素;
document.querySelectorAll('.parent')[0]
獲取的是第一個符合class = "parent"
的元素節點。
document.querySelectorAll('.parent')[1]
獲取的是第二個符合class = "parent"
的元素節點。
結果:
child事件被觸發,child
parent事件被觸發,parent
結論:先child,然後parent。事件的觸發順序自內向外,這就是事件冒泡。
現在改變第三個參數的值爲true
document.querySelectorAll(".parent")[1].addEventListener("click",function(e){
alert("parent事件被觸發,"+this.id);
},true)
document.querySelectorAll(".child")[1].addEventListener("click",function(e){
alert("child事件被觸發,"+this.id)
},true)
結果:
parent事件被觸發,parent
child事件被觸發,child
結論:先parent,然後child。事件觸發順序變更爲自外向內,這就是事件捕獲。
下圖演示的事件冒泡和時間捕獲:
應用案例
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
需求是這樣的:鼠標放到li上對應的li背景變灰。
利用事件冒泡實現:
$("ul").on("mouseover",function(e){
$(e.target).css("background-color","#ddd").siblings().css("background-color","white");
})
也許有人會說,我們直接給所有li都綁上事件也可以啊,一點也不麻煩,只要……
$("li").on("mouseover",function(){
$(this).css("background-color","#ddd").siblings().css("background-color","white");
})
是,這樣也行。而且從代碼簡潔程度上,兩者是相若彷彿的。但是,前者少了一個遍歷所有li節點的操作,所以在性能上肯定是更優的。
還有就是,如果我們在綁定事件完成後,頁面又動態的加載了一些元素……
$("ul").append("<li>item</li>");
這時候,第二種方案,由於綁定事件的時候li
還不存在,所以當新添加li時候,效果不起作用(新的li
未綁定事件)。所以爲了效果,我們還要給它再綁定一次事件。
完整代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡和事件捕獲</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style>
.parent{
border: 1px solid red ;
height: 200px;
width: 200px;
}
.child{
background-color: #e7ff69;
height: 100px;
width: 100px;
margin: 0 auto;
margin-top: 50px;
}
</style>
</head>
<body>
<hr>
<h3>1.事件冒泡:從內向外;第三個參數爲false(默認值)</h3>
<hr>
<div class="parent">
<div class="child"></div>
</div>
<hr>
<h3>2.事件捕獲:從外向內:第三個參數爲true</h3>
<hr>
<div class="parent">
<div class="child"></div>
</div>
<br>
<br>
<hr>
<h3>3.應用案例</h3>
<hr>
<input type="button" value="添加一個li" id="btn">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
<script>
document.querySelector(".parent").addEventListener("click",function(e){
alert("parent事件被觸發,"+this.id);
})
document.querySelector(".child").addEventListener("click",function(e){
alert("child事件被觸發,"+this.id)
})
document.querySelectorAll(".parent")[1].addEventListener("click",function(e){
alert("parent事件被觸發,"+this.id);
},true)
document.querySelectorAll(".child")[1].addEventListener("click",function(e){
alert("child事件被觸發,"+this.id)
},true)
$("#btn").click(function () {
$("ul").append("<li>item</li>");
});
/*//僅僅對li簡單的綁定事件會使得添加了新的li時候,得重新給他綁定上事件,否則不起作用。下面方法不好
$("li").on("mouseover",function(){
$(this).css("background-color","#ddd").siblings().css("background-color","white");
})*/
//利用事件冒泡實現
$("ul").on("mouseover",function(e){
$(e.target).css("background-color","#ddd").siblings().css("background-color","white");
})
</script>
</body>
</html>