這裡要來補充一個小知識，在 .addEventListener() 這個事件監聽的方法，還有第三個參數，只是沒有設定時，預設會是 false
即一個元素的點擊事件正常會如下:
Jerry Huang
el.addEventListener('click',function(){
alert('Hello');
},false);
而這個第三個參數到底有什麼用途呢?
當我們今天的 HTML 架構如下:
<body class="body">
<div class="box"></div>
</body>
然後給一下 .box 一些樣式
.box{
width: 150px;
height: 150px;
background: black;
}
此時，應該會有一個黑色的正方形在頁面上
這時候來設置 .box 和 .body 的點擊事件
var elBox = document.querySelector('.box');
elBox.addEventListener('click',function(){
alert('box');
},false);
var elBody = document.querySelector('.body');
elBody.addEventListener('click',function(){
alert('body');
},false);
而當我們點擊黑色正方形的時候，會發生什麼事情?
這時候會先彈跳視窗顯示 box 再彈跳視窗顯示 body
當第三個參數為 false，元素之間彼此重疊且都有設定事件時，會由指定元素往外層擴散出去
若為 true，則反之:
var elBox = document.querySelector('.box');
elBox.addEventListener('click',function(){
alert('box');
},true);
var elBody = document.querySelector('.body');
elBody.addEventListener('click',function(){
alert('body');
},true);
這時候反而會先彈跳視窗顯示 body 再彈跳視窗顯示 box，會由最外層的元素一層一層往內到指定的元素
而對於上述的兩種現象，分別有各自的名字
當為 false 時，叫做事件冒泡，因為就像氣泡一樣，一層一層往上擴散
當為 true 時，叫做事件捕捉，就像在一大片空地上尋找指定的獵物
目前還沒有實用到的機會，但希望這個小知識能補充給大家 
另外，如果元素彼此重疊，不想執行事件冒泡或者事件捕捉的時候，可對於事件本身下一個指令，如下：
var elBox = document.querySelector('.box');
elBox.addEventListener('click',function(e){
e.stopPropagation();
alert('box');
},false);
關鍵在於 function 內有帶一個 e 參數，即是指事件本身，而 .stopPropagation() 就是去停止上述的兩種現象
iThome鐵人賽
看影片追技術