JavaScript 事件捕獲

admin發表於2018-11-08
JavaScript事件

事件捕獲對於很多朋友比較陌生，實際編寫程式碼中應用較少。

大家普遍比較熟悉的是事件冒泡，它應用廣泛，帶來了很多便利。

對於知識點的掌握不要太功利，有些當前用不到的知識，可能在未來某個時刻發揮舉足輕重作用。

就如同生活中交朋友，也不要太勢力，誠實待人才是關鍵，誰知道未來誰會真正幫助你。

JavaScript事件的傳播分為兩個過程：

（1）.事件捕獲階段。

（2）.事件冒泡階段。

關於事件冒泡可以參閱JavaScript 事件冒泡一章節。

事件捕獲階段在事件冒泡階段之前，圖示如下：

特別說明：下圖來源於一外文網站，在此特別感謝。

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/144933yldukfdlfnldjzd8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

圖示分析說明如下：

（1）.圖中數字順序就是事件傳播的順序。

（2）.事件捕獲先於事件冒泡。

（3）.事件捕獲恰好與事件冒泡相反，它從頂層祖先元素開始，直到事件觸發元素。

下面再通過程式碼例項演示一下事件捕獲階段的存在。

首先看一下addEventListener的語法結構：

[JavaScript] 純文字檢視 複製程式碼
target.addEventListener(type, listener, useCapture)

很少朋友會關注第三個引數的真正作用，只是將它預設設定為false即可。

此引數規定是在捕獲階段觸發事件還是在冒泡階段觸發事件，false表示在冒泡階段觸發事件。

正是由於工作中頻繁使用事件冒泡，絕少使用事件捕獲，從而甚至感覺第三個引數值固定為false一般。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
#box{
  width:400px;
  height:400px;
  background-color:blue;
}
#middle{
  height:200px;
  width:200px;
  background-color:green;
}
#inner{
  height:50px;
  width:50px;
  background-color:red;
}
</style>
<script>
window.onload=function(){
  let obox=document.getElementById("box");
  let omiddle=document.getElementById("middle");
  let oinner=document.getElementById("inner");
     
  obox.addEventListener("click",function(){console.log("box")},true);
  omiddle.addEventListener("click",function(){console.log("middle")},true);
  oinner.addEventListener("click",function(){console.log("inner")},true);
}
</script>
</head>
<body>
<div id="box">
  <div id="middle">
    <div id="inner"></div>
  </div>
</div>
</body>
</html>

點選最內側的紅色div測試效果，程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/145021cjk6oolabd66lj5g.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

addEventListener方法的第三個引數為true，說明在捕獲階段觸發事件。

點選inner元素後，如果是事件冒泡觸發，那麼事件由觸發元素向頂層元素傳播。

而事件捕獲則恰好相反，所以列印的id值順序是從外到內。

相關文章