# Event Listener 使用說明 準備一個 element ### addEventListener(['你要監聽的事件名稱'](https://developer.mozilla.org/en-US/docs/Web/Events), 監聽到後你要對他做的事情(callback), <font color="#b30077">是否使用捕獲</font>); 舉個註冊點擊事件的例子 :a: ```javascript= element.addEventListener('click', function() { alert('我來了~'); }); ``` :b: ```javascript= element.addEventListener('click', sayHi); function sayHi() { alert('我又來了～'); } ``` :a: 方法是匿名函式，缺點是你無法對已註冊的事件作<font color="red">取消</font> <br /> <br /> 那 :b: 的方法要怎麼取消呢？ ```javascript= element.removeEventListener('click', sayHi); ``` 這樣就完成了～ <hr /> ### 其實還有第三個選填參數 當你不寫的時候預設是 false (意思就是你沒寫或是寫上 false 都是不開啟的意思) 不啟用捕獲事件, 也就是使用泡泡事件 ![](https://i.imgur.com/B8cdzcB.png) 來看個階層關係 ```htmlembedded= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>學個事件註冊</title> <style> #red { width: 300px; height: 300px; background-color: red; } #gray { width: 100px; height: 100px; background-color: gray; } </style> </head> <body> <div id="red"> <div id="gray"> </div> </div> <script> var red = document.querySelector('#red'); var gray = document.querySelector('#gray'); red.addEventListener('click', function(e){ alert('我是紅色'); }); gray.addEventListener('click', function(e){ alert('我是灰色'); }); </script> </body> </html> ``` 舉個例子 黑色是最外層 Document 在紅色註冊一個點擊事件 alert 出我是紅色(我的老爸是 Document) 也在灰色註冊一個點擊事件 alert 出我是灰色(我的老爸是紅色) 這個時候～當你點擊在灰色上面時會發生很奇妙的事情 **<font color="red">Alert 順序</font>** alert(我是灰色) alert(我是紅色) 竟然會出現兩個視窗 因為預設是泡泡事件，當點擊到目標時，他會在你的目標往上彈回去才去觸發你註冊的事件，然後做你在事件觸發後想做的事情～ 想像成**點擊**下去的路徑是 Document -> red -> gray (其實這裡是所謂的 capture) 而**返回**的路徑是 gray -> red -> Document (這裡又叫做 bubble) <hr /> <br /> <br /> ### 如果我不使用泡泡模式... 如果把參數改成 true 那觸發事件的順序就變成 Document -> red -> gray **<font color="red">Alert 順序</font>** alert(我是紅色) alert(我是灰色) 就這樣(~~不過捕獲很少用可以不管它沒差~~) 所以當有些時候你使用了預設泡泡但是竟然會觸發你在父層註冊的事件 :-1:真的很煩:-1: 那就在你真正想要觸發的事件 call back 中加個 ```javascript= e.stopPropagation(); ``` 阻止他白目的再往上浮起去打擾你老爸 好就這樣～