事件處理（概述）
事件是在瀏覽器視窗內部觸發的訊號，用於通知瀏覽器或作業系統環境的變化。程式設計師可以建立事件處理程式程式碼，當事件觸發時執行，從而使網頁能夠對變化做出適當的響應。
此頁面提供了關於如何使用事件和事件處理程式的非常簡短的“提示”。新的開發者應該閱讀事件簡介。
有哪些可用的事件？
註冊事件處理程式
有兩種推薦的註冊處理程式的方法。可以透過將事件處理程式程式碼分配給目標元素對應的onevent屬性，或者透過使用addEventListener()方法將處理程式註冊為元素的偵聽器，來使事件處理程式程式碼在事件觸發時執行。在這兩種情況下，處理程式都將接收一個符合Event介面（或派生介面）的物件。主要區別在於可以使用事件偵聽器方法新增（或刪除）多個事件處理程式。
警告：使用 HTML onevent 屬性設定事件處理程式的第三種方法不推薦！它們會使標記膨脹，使其可讀性降低，並且更難除錯。有關更多資訊，請參閱內聯事件處理程式。
使用 onevent 屬性
按照慣例，觸發事件的 JavaScript 物件具有相應的“onevent”屬性（透過在事件名稱前新增“on”來命名）。當事件觸發時，呼叫這些屬性來執行關聯的處理程式程式碼，並且也可以由你自己的程式碼直接呼叫。
要設定事件處理程式程式碼，你可以將其分配給相應的 onevent 屬性。每個元素的每個事件只能分配一個事件處理程式。如果需要，可以透過將另一個函式分配給同一屬性來替換處理程式。
下面顯示瞭如何使用onclick屬性為click事件設定一個簡單的greet()函式。
const btn = document.querySelector("button");
function greet(event) {
console.log("greet:", event);
}
btn.onclick = greet;
請注意，表示事件的物件作為第一個引數傳遞給事件處理程式。此事件物件實現了或派生自Event介面。
EventTarget.addEventListener
在元素上設定事件處理程式最靈活的方法是使用EventTarget.addEventListener方法。這種方法允許將多個偵聽器分配給一個元素，並在需要時刪除偵聽器（使用EventTarget.removeEventListener）。
注意：能夠新增和刪除事件處理程式使你可以例如在不同的情況下讓同一個按鈕執行不同的操作。此外，在更復雜的程式中，清理舊的/未使用的事件處理程式可以提高效率。
下面顯示瞭如何將一個簡單的greet()函式設定為click事件的偵聽器/事件處理程式（如果需要，你可以使用 lambda 函式而不是命名函式）。再次注意，事件作為第一個引數傳遞給事件處理程式。
const btn = document.querySelector("button");
function greet(event) {
console.log("greet:", event);
}
btn.addEventListener("click", greet);
該方法還可以接收其他引數/選項來控制捕獲和刪除事件的方式。有關更多資訊，請參閱EventTarget.addEventListener參考頁面。
使用中止訊號
一個值得注意的事件偵聽器功能是能夠使用中止訊號同時清理多個事件處理程式。
這是透過將相同的AbortSignal傳遞給要一起刪除的所有事件處理程式的addEventListener()呼叫來完成的。然後，你可以對擁有AbortSignal的控制器呼叫abort()，它將刪除使用該訊號新增的所有事件處理程式。例如，要新增一個可以使用AbortSignal刪除的事件處理程式
const controller = new AbortController();
btn.addEventListener(
"click",
(event) => {
console.log("greet:", event);
},
{ signal: controller.signal },
); // pass an AbortSignal to this handler
然後，可以使用以下方法刪除上面程式碼建立的事件處理程式
controller.abort(); // removes any/all event handlers associated with this controller