JS 筆記 - 終止冒泡事件 stopPropagation 與取消預設觸發行為 preventDefault

冒泡事件 Event Bubbling 與捕獲事件 Event Capturing

在 addEventListener 中有提到 false 為預設的冒泡事件，這篇學習指定元素終止冒泡事件。
情境會用在倘若有兩個元素重疊的時候，就可以使用這個語法。

複習一下 addEventListener 的寫法，以click 為例:

el.addEventListener(
  "click",
  function () {
    alert("click here");
  },
  false
);

最後面出現的布林值的意思是:

false (冒泡事件 Event Bubbling): 從指定的元素往外找 (預設為 false)
true (捕獲事件 Event Capturing): 從最外層找到指定元素

舉一個例子，

1
2
3

<body class="body">
  <div class="box"></div>
</body>

目前看到有一個 .box，他的最外層也有一個 .body，共兩個元素，透過 addEventListener 的多選特性，在 JS 寫下兩個語法，目前都是設定為從指定元素往外找:

var el = document.querySelector(".box");
el.addEventListener(
  "click",
  function () {
    alert("click box");
  },
  false
);

var bodyEl = document.querySelector(".body");
bodyEl.addEventListener(
  "click",
  function () {
    alert("click body");
  },
  false
);

如果寫這樣，當點擊 .box 區域時，alert 就會彈出兩次，因為 .box 是在 .body 的內層，布林值為 false ，所以電腦會往外層找。

codepen: https://codepen.io/hnzxewqw/pen/gOpmWZN

使用終止冒泡事件 stopPropogation

這時要在指定的元素中寫上終止冒泡事件 ()的語法，讓 alert 在指定元素後就終止冒泡事件，在指定元素的 function 的小括號，要告訴它有一個事件，所以會變這樣寫：

function(e) 或是 function(event)，

並加上這段語法:
e.stopPropogation();告訴瀏覽器，除了這個 function 的事件外，都不要啟動冒泡事件。

所以完整的程式碼如下:

var el = document.querySelector(".box");
el.addEventListener(
  "click",
  function (e) {
    e.stopPropogation(); //終止冒泡事件語法
    alert("click box");
  },
  false
);

codepen: https://codepen.io/hnzxewqw/pen/XWbMgdE

preventDefault 取消預設觸發行為

preventDefault 取消預設觸發行為 跟 stopPropogation 終止冒泡事件，兩個在網頁上呈現很像，但用法不太一樣。

preventDefault 是取消原本標籤預設的功能，像是取消 a 連結在點擊後會前往指定網頁，或是 submit 按鈕會傳送資料到資料庫去的功能…等等。

寫法跟 stopPropogation 的位置一樣，如下：

el.addEventListener(
  "click",
  function (e) {
    e.preventDefault(); //取消預設觸發行為
  },
  false
);

是直接告訴 function 第一件要執行的內容，並且在後方在寫入想要進行的語法，這樣的好處是，可以自訂義想要執行的功能，就不會受到預設值的影響。

codepen: https://codepen.io/hnzxewqw/pen/dyovRKb

冒泡事件 Event Bubbling 與 捕獲事件 Event Capturing

使用終止冒泡事件 stopPropogation

preventDefault 取消預設觸發行為

冒泡事件 Event Bubbling 與捕獲事件 Event Capturing