這邊來介紹事件監聽語法如下圖，之前我們是直接用 onclick 這邊在選到物件後直接先放一個監聽後面的括號在放要執行的事件與程式後面的 false 是事件冒泡與事件捕捉這個最後面會講解：
var el = document.querySelector('.btn');
el.addEventListener('click',function(e){
alert('你成功了！');
},false)
這樣跟之前直接使用 onclick 有什麼差異呢？
差異在 addEventListener 可以放連續多個監聽事件，而 onclick 這種方式只能放一種例如以下程式碼：
// addEventListener能綁定多個事件監聽
var el = document.querySelector('.btn');
el.addEventListener('click',function(e){
alert('哈囉');
},false)
el.addEventListener('click',function(e){
alert('你好哇！');
},false)
// onclick 只會顯示最後一個綁定事件
var el = document.querySelector('.btn_a');
el.onclick = function(e){
alert('哈囉');
}
el.onclick = function(e){
alert('你好哇！');
}
大家可以點擊 事件監聽綁定差異範例程式 去看看如果用事件監聽的方式，可以綁定多組的事件，但是用 onclick 即便你綁定了多組事件永遠只會顯示最後一組的事件，靈活性就比較差了。
為什麼在監聽事件後面要加 false 呢？其實還有一個叫做 true
兩者個差別在於：
false 事件冒泡-是從指定元素往外找
true 事件捕捉-是從最外面往內找到指定元素
想一下這個情境，今天我們的 HTML 與 JS 的程式碼是這樣，因為所有的 HTML 標籤都會在 body 內，那如果今天在 body 上綁定一個監聽事件，但我們點擊 box 在外面的 body 會被觸發事件嗎？
會觸發的但是這邊是用 false 所以點擊 box 會先執行這個元素的程式，然後會像冒泡一樣依序找到外面的元素去觸發，但如果把 false 改成 true 可以發現點擊 box，先觸發的反而是最外面的元素再往內找有沒有需要觸發的事件元素，就像是往內捕捉一樣，可以參考下方程式碼或執行這個範例 DEMO 觀察差異。
HTML
<body>
<div class="box"></div>
</body>
JS
// 監聽box
var el = document.querySelector('.box');
el.addEventListener('click',function(e){
alert('哈囉');
},false)
// 監聽body
var elbody = document.querySelector('body');
elbody.addEventListener('click',function(e){
alert('body');
},false)
不過今天點擊一個物件，如果在物件外面又綁定其他事件這樣會連續觸發也不是我們要的，希望可以點擊一個物件就觸發這個事件就好不要引起連鎖反應，這時候就可以加上 stopPropagation 如此一來就不會產生冒泡事件不斷的去觸發其他的事件囉！
參考 DEMO
程式碼如下：
// stopPropagation - 中止冒泡事件
var el = document.querySelector('.box');
el.addEventListener('click',function(e){
e.stopPropagation();
alert('哈囉');
},false)
var elbody = document.querySelector('body');
elbody.addEventListener('click',function(e){
alert('body');
},false)
在介紹一個取消預設觸發行為的事件語法，如果我們在一個 a 連結綁定一個事件監聽是下拉一個選單出來，不過在 HTML 的標籤每一種標籤都有預設的行為，以 a 連結來講就是會跳轉到一個指定的地方或網址，若要取消這種預設的屬性，只執行我們賦予它的程式就得先用 preventDefault 的方式，像是下面這樣的語法：
HTML
<a href="https://www.google.com/?hl=zh_tw">我是GOOGLE 網站</a>
JS
// preventDefault - 取消預設觸發行為
var el = document.querySelector('a');
el.addEventListener('click',function(e){
e.preventDefault();
},false)
以上就是今天事件的分享囉，還剩下7天就要結束了，希望真的可以講到最後能做出一個待辦清單的小應用工具呀！
iThome鐵人賽
看影片追技術