onclick event vs. addEventListener

JavaScript 使用一般 onclick event:

一個 event 一次只能對應到一個 function

Example:

var btn = document.querySelector('.btn');
function pressBtn1(){
   console.log('Ouch');
}
function pressBtn2(){
   console.log('Ouch again');
}
btn.onclick() = pressBtn1;   
btn.onclick() = pressBtn2;  

驗證:
當使用者按下按鈕後, 只會觸發順序最後一個的 function 內容, 所以說在這邊只有 pressBtn2 會被觸發。

具有多個事件 (event) 的 addEventListener:

一個 event 可以對應到多個 function

驗證:
如果改用 addEventListener 來監聽以上 btn example 的 onclick event 的話, 當使用者按下按鈕後, 首先會按照先後順序觸發 pressBtn1 的內容, 之後也會觸發 pressBtn2 的內容。

let btn = document.querySelector('.btn');
function pressBtn1(){
   console.log('Ouch');
}
function pressBtn2(){
   console.log('Ouch again');
}
btn.addEventListener('click',pressBtn1);
btn.addEventListener('click',pressBtn2);

let myBtn = document.querySelector('.btn');
function function1(){
   console.log('Ouch');
}
function function2(){
   console.log('Ouch again');
}
function function3(){
   console.log('Hi there');
}
myBtn.addEventListener('click',function1);
myBtn.addEventListener('click',function2);
myBtn.addEventListener('mouseover', function3);

回顧:
onEvent: 只會觸發並且執行最後一項
addEventListener: 都會觸發並且執行

動態刪除已新增的 function:

element.removingEventListener(event, listner, useCapture)
// useCapture (Optional): true or false → default = false

當使用者想要 移除 addEventListener 增加的事件 (event) 時, 便可以使用 removingEventListener

這邊有兩個針對同一個目標且使用 removeEventListener 的不同寫法, 讓我們來看看有什麼差異吧

1. 無法移除 addEventListener 的事件

   let btn = document.querySelector('.btn');
   btn.addEventListener('click', function() {
     console.log('fail');
   },false)
   btn.removeEventListener('click', function(){
     console.log('fail');
   },false)
   

2. 成功移除 addEventListener 的事件

   let btn = document.querySelector('.btn');
   let example = function() {
     console.log('succees');
   }
   btn.addEventListener('click', example, false);
   btn.removeEventListener('click', example, false);
   

第一種寫法是無法移除 addEventListener 事件的, 乍看之下 addEventListener 和 removeEventListener 都吃了 function(), 不過其實是不同的 function()
那麼要怎麼處理才能讓 addEventListener 和 removeEventListener 都吃到同樣的 function()呢?
我們必須把這個 function() 獨立定義出來 →

let example = function() {
  console.log('succees');
}

再讓 addEventListener 和 removeEventListener 把這個 function() 吃進去做執行