JavaScript event.bubbles

admin發表於2019-02-14
JavaScript

此事件屬性可以判斷當前事件是否是冒泡型別

關於這兩種型別事件可以參閱如下兩篇文章：

（1）.JavaScript 事件冒泡一章節。

（2）.JavaScript 事件捕獲一章節。

此屬性返回一個布林值，true表示冒泡型別，false表示非冒泡型別。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
event.bubbles

瀏覽器支援：

（1）.IE瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.火狐瀏覽器支援此屬性。

（4）.Opera瀏覽器支援此屬性。

（5）.谷歌瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

例項程式碼：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style type="text/css"> 
div,p,span{ 
  margin:0px auto; 
} 
div{ 
  width:200px; 
  height:200px; 
  background-color:#639; 
} 
p{ 
  width:150px; 
  height:150px; 
  background-color:#F60; 
} 
span{ 
  width:100px; 
  height:100px; 
  display:block; 
  background-color:#030; 
} 
</style> 
<script> 
window.onload=function(){ 
  let ospan = document.getElementById("span");
  ospan.onclick = function (ev) {
    if (ev.bubbles) {
      console.log("事件類是冒泡型別"); 
    } 
    else{ 
      console.log("事件不是冒泡型別"); 
    } 
  } 
} 
</script> 
</head> 
<body> 
<div id="box"> 
  <p><span id="span"></span></p> 
</div> 
</body> 
</html>

當點選span元素的時候，就會觸發事件，並在控制檯列印出響應的資訊。

相關文章