js點選事件的執行過程例項分析【冒泡與捕獲】

阿新 • • 發佈：2020-04-13

本文例項講述了js點選事件的執行過程。分享給大家供大家參考，具體如下：

js事件物件event包括很多事件型別，這裡用onclick事件為例，探討一下在js事件捕獲機制和冒泡機制下的執行過程，以及如何阻止事件的捕獲和冒泡。

首先看下當我們點選一個元素後，瀏覽器的執行過程。

1，當某個元素繫結的事件被觸發時，這時瀏覽器就會從頂級document元素髮出一個事件流

2，這個事件流順著dom層級，一層一層向下找，直到遇到了觸發事件的目標元素，這個查詢的過程是捕獲階段

說明：捕獲階段，在查詢每一層dom時，遇到相同的事件預設不執行，元素的事件預設在冒泡階段執行

3，到達目標元素後會觸發目標元素繫結的事件函式，也就是目標元素事件函式處理階段

4，在處理過目標元素事件後，在順著dom層級一層一層向上查詢，這時對應dom上如果有相同的事件，預設會被觸發，冒泡階段

例項：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
 <div class="box" style="width:300px;height:300px;background:green;" οnclick="firstClick()">
  parent
  <div class="child" οnclick="secondClick()">child
    <div class="button" onclick = "thirdClick()">提交</div>
  </div>
</div>
<script>
  var divs=document.querySelectorAll("div");//獲取所有的divs
  function firstClick(){
    alert('firstClick')
  }
  function secondClick(){
    alert('secondClick')
  }
  function thirdClick(){
    alert('thirdClick')
  }
  function fn0(){
    alert("box");
  }
  function fn1(){
    alert("child");
  }
  function fn2(){
    alert("but");
  }
  divs[0].addEventListener("click",fn0,false);
  divs[1].addEventListener("click",fn1,false);
  divs[2].addEventListener("click",fn2,false);
</script>
</body>
</html>

說明：

addEventListener有三個引數，最後一個引數是決定元素事件的觸發階段，預設是false，在冒泡階段執行，設定為true,則在捕獲階段執行。

在dom上直接繫結的事件會在addEventListenter監聽的事件執行之後執行。

阻止冒泡：

onclick = function(e){
  e=e||window.event;
    if(e.stopPropagation){
    e.stopPropagation();//其它瀏覽器
  }else{
    e.cancelBubble=true;//IE瀏覽器
  }
}

阻止捕獲：判斷e.target

function fn0(e){
  if(e.target == divs[0]){
    alert("fn0");
  }
}
divs[0].addEventListener("click",true);

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查詢演算法技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript錯誤與除錯技巧總結》

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