在 addEventListener 中有提到 false 為預設的冒泡事件，這篇學習指定元素終止冒泡事件。
情境會用在倘若有兩個元素重疊的時候，就可以使用這個語法。
複習一下 addEventListener 的寫法，以click 為例:
el.addEventListener(
"click",
function () {
alert("click here");
},
false
);
最後面出現的布林值的意思是:
舉一個例子，
<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
這時要在指定的元素中寫上**終止冒泡事件 ()**的語法，讓 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 取消預設觸發行為 跟 stopPropogation 終止冒泡事件，兩個在網頁上呈現很像，但用法不太一樣。
preventDefault 是取消原本標籤預設的功能，像是取消 a 連結在點擊後會前往指定網頁，或是 submit 按鈕會傳送資料到資料庫去的功能...等等。
寫法跟 stopPropogation 的位置一樣，如下：
el.addEventListener(
"click",
function (e) {
e.preventDefault(); //取消預設觸發行為
},
false
);
是直接告訴 function 第一件要執行的內容，並且在後方在寫入想要進行的語法，這樣的好處是，可以自訂義想要執行的功能，就不會受到預設值的影響。
codepen: https://codepen.io/hnzxewqw/pen/dyovRKb
iThome鐵人賽
看影片追技術