JS 什麼是事件(event)與事件監聽(addEventlistener)

說明事件(DOM event)及類型及Document Object Properties and Methods，以及常見的事件監聽(addEventListener)說明

event(事件)

Event 介面表示了一個在 DOM 物件上所發生的事件。
一個事件可以是由使用者的操作行為所產生（如：點擊滑鼠按鈕或敲打鍵盤或滾輪或伸縮），或是來自 API 因處理非同步任務所產生。-MDN:Event

經上方撰述，使用者在瀏覽網頁時會觸發很多事件 (events) 的發生，DOM Event 定義很多種事件型態，讓你可以用 JavaScript 來監聽 (listen)或者其他DOM的行為方式和處理 (event handling) 這些事件。
而除了listen，利用DOM進行處理”事件”行為的方法有很多種，常見的為:addEventListener()、getElementById()、getElementsByClassName()、getElementsByName()、getElementsByTagName()、querySelector()、querySelectorAll()，
其餘處理方法可參考W3c中Document Object Properties and Methods，
撰寫方式為:

1 2	// DOM 處理方式其一 const A = document.querySelector('h1');

另外事件觸發條件，除了下方會說明的click外，也包含以下條件:

–圖片參考自Fooish程式技術:JavaScript DOM Event (事件處理)

更詳細DOM event 可參考HTML DOM Events

註冊事件監聽(addeventListener)及觀察(e)物件

在HTML DOM元素中，相對較常使用的為addEventListener()方法，

以下說明:

<body>
    <input type="button" value="點擊" class="btn">
    <script src="script.js"></script>
</body>

const btn = document.querySelector(".btn");
// 搭配DOM(此例子為btn)，先進行註冊，後進行監聽，當產生"click"行為時觸發函式(click為其一動作，也可為其他動作)
btn.addEventListener("click", function(e) {
    console.log(e)
})

在撰寫函式時，function(e)中括號內e，為event的物件，會記錄你當下的動作，例如我撰寫下方程式，再進一步去點擊撰寫點擊的按鈕，console.log(e)會記錄(快照)你當下滑鼠點擊的情形，比如點擊按鈕的x/y軸方位等。

下圖為滑鼠點擊按鈕後，e(event)物件的紀錄:

觀察是否有綁定事件監聽，可於觀察者工具內的element中的EventListener觀看:

最後，較少使用，移除addEventListener方法為，使用 removeEventListener() 方法刪除已通過 addEventListener() 方法附加的事件處理程序：

document.addEventListener("mousemove", myFunction);

// remove
document.removeEventListener("mousemove", myFunction);

自學日記

JS 什麼是事件(event)與事件監聽(addeventlistener)

JS 什麼是事件(event)與事件監聽(addEventlistener)

event(事件)

註冊事件監聽(addeventListener)及觀察(e)物件