# JS筆記 event event事件在你的網頁無時不刻發生，點擊滑鼠，移動游標，輸入鍵盤等等，都會造成event。 這裡介紹一個event發生時的接收器，addEventListener 首先設立一個html檔，然後設一個app.js的js檔 在html設一個按鈕 ```htmlembedded <head> </head> <body> <button class="btn">按我</button> <script src="app.js"></script> <body> ``` app.js ```javascript const btn = document.querySelector(".btn") btn.addEventListener("click", function () { console.log("123"); }) ``` 然後我們來到網頁，Ｆ12打開控制台，只要我們每按一次按鈕，控制台就會回傳123 addEventListener觀察到"click"也就是點擊這個event，就會啟動下面的function，印出123 addEventListener是event的接收器，他是可以共存的。 ```javascript const btn = document.querySelector(".btn") btn.addEventListener("click", function () { console.log("123"); }) btn.addEventListener("click", function () { console.log("456"); }) btn.addEventListener("click", function () { console.log("789"); }) ``` 這樣按一次，就會印出 123 456 789 addEventListener 還有一個重要的應用，那就是可以改變html檔script的位置 如果我們把script移到我們js要選取目標的上方的話會出現error ```htmlembedded <head> <script src="app.js"></script> </head> <body> <button class="btn">按我</button> <body> ``` 因為選取不到內容，會出現Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at app.js 這時候可以在app.jss寫上 ``` document.addEventListener ("DOMContentLoaded",() => { //想寫在js的程式 }) ``` 這樣script放在哪裡都能讀到他想改的內容，就不會有error 把我們想打的內容放在這個function裡面 ```javascript document.addEventListener ("DOMContentLoaded",() => { const btn = document.querySelector(".btn") btn.addEventListener("click", function () { console.log("123"); }) }) ``` ＃ 還有一個更簡潔的方法：在script 加上defer ```htmlmixed <script src="app.js" defer></script> ``` 對，就這麼簡潔！！！