JS趴趴往上走-addEventListener()

EventTarget.addEventListener()

能將指定的事件監聽到EventTarget物件上
簡單來說就是當使用者觸發HTML的元素，可使用監聽去觸發不同事件

  //綁定被觸發的變數.監聽('觸發事件',執行內容,捕獲/冒泡傳遞機制);
 test.addEventListener(type,listener,useCapture);

例如:點擊button，回傳hello
首先設置一個button

 <button id="btn">點我</button>

點擊button使用EventTarget.addEventListener()監聽,回傳Hello

 var btn=document.getElementById('btn');
 btn.addEventListener('click',function(){
   console.log('Hello');
 },false);

on-event處理器

除了使用addEventListener()觸發事件，也可以使用on-event處理器觸發事件
通常是根據它的屬性事件(on+屬性名)來對應所觸發的事件

 var btn=document.getElementById('btn');
 btn.onclick=function(){
   console.log('Hello');
 }

但使用on-event處理器只能執行一個事件

 var btn=document.getElementById('btn');
 btn.onclick=function(){
   console.log('Hello');
 }
btn.onclick=function(){
   console.log('Hiiiiiiii');
}

以上範例就只會產生Hiiiiiiii

而相對於addEventListener()，能處理多個相同的事件

 var btn=document.getElementById('btn');
 btn.addEventListener('click',function(){
   console.log('Hello');
 },false);
 btn.addEventListener('click',function(){
   console.log('Hiiiiiii');
 },false);

此範例就兩個console.log()的內容都會產生

addEventListener()的「捕獲」、「冒泡」機制

addEventListener()的第三個參數:「捕獲」、「冒泡」的執行，是使用boolean值呈現

flase:冒泡(從下往上)
true:捕獲(從上往下)


這邊做個小範例:建議點進去看他的console.log()哦

See the Pen
addEventListener(捕獲、冒泡) by yanennn (@yennnnn)
on CodePen.

我們以上面範例來說，當子階級點擊後，首先父階級outside會先接受消息，這時當父階級是true也就是捕獲時，我們會先收到父層級的消息後換接收子層級消息,而子層級會依照程式碼順序寫出來,先寫的就優先執;反之假如是false(冒泡)，那麼子層級會先執行，執行完在換父層級

而我們點擊父層級呢，由於父層級上面沒有他的父層級，所以他只會顯示自己而已

這邊提醒，若第三參數沒寫ture或false的話，也是可以執行程式，他會默認成是false，但為了能分辨，建議有寫會比較好~


以上，大家可以試試看把換註解，或者交換位子會更清楚哦