如何在 JavaScript 中添加事件處理程序

要將事件處理程序添加到 HTML 元素，您可以使用 addEventListener() 元素對象的方法。

addEventListener() 方法將事件處理程序附加到指定的 HTML 元素，而不覆蓋現有的事件處理程序。

假設您有以下 ID 為 #clickMe 的按鈕 ：

<button id="clickMe">Join Now</button>

附加 click 上面按鈕的事件處理函數，可以使用下面的例子：

// Define an event handler function
const handler = (e) => {
    console.log(`Button is clicked!`);
};

// Attach event handler to button
const btn = document.querySelector('#clickMe');
btn.addEventListener('click', handler);

如上所示，我們首先定義了一個事件處理函數，然後使用 addEventListener() 將其與元素附加的方法。

addEventListener() 最多接受三個參數。第一個參數是你要監聽的事件的名字，比如click , change , mouseover ， 等等。第二個參數是事件發生時要調用的函數。第三個參數是一個可選的布爾值，表示是要使用事件冒泡還是事件捕獲。

如果您對重用事件處理函數不感興趣，也可以使用 匿名函數 作為事件處理程序：

const btn = document.querySelector('#clickMe');
btn.addEventListener('click', (e) => {
    console.log(`Button is clicked!`);
});

為同一個元素添加多個事件處理程序

addEventListener() 方法允許您向同一個 HTML 元素添加任意數量的事件，而不會覆蓋現有事件。

// Define first handler
const handler = (e) => {
    console.log(`Button is clicked!`);
};

// Define second handler
const anotherHandler = (e) => {
    console.log(`Button is clicked!`);
};

// Attach both event handlers to the same button
const btn = document.querySelector('#clickMe');
btn.addEventListener('click', handler);
btn.addEventListener('click', anotherHandler);

您還可以使用 addEventListener() 將不同類型的事件添加到同一元素 方法：

const btn = document.querySelector('#clickMe');

btn.addEventListener('click', (e) => {
    console.log(`Clicked!`);
});

btn.addEventListener('mouseover', (e) => {
    console.log(`Mouse over!`);
});

btn.addEventListener('mouseout', (e) => {
    console.log(`Mouse out!`);
});

向window添加事件處理程序 對象

addEventListener() 方法允許您將事件偵聽器添加到任何 DOM 對象，例如 HTML 元素、HTML 文檔和 window 對象。

例如，這是一個在用戶滾動文檔時觸發的事件監聽器：

window.addEventListener('scroll', (e) => {
        console.log(`You have scrolled ${window.scrollY}px!`);
});

事件冒泡和捕獲

事件冒泡和捕獲是 HTML DOM 中事件傳播的兩種方式。事件傳播定義了事件發生時元素的順序。

假設你有一個 <button> <p> 內的元素 元素，用戶點擊<button> 元素。哪個元素的 click 應該先處理事件？

<p>
    <button>Subscribe</button>
</p>

在捕獲中，最外層元素的事件首先被處理，然後是內部元素。 <p> 先處理元素的點擊事件，再處理<button> 元素的 click 事件。

在冒泡中，最裡面的元素的事件首先被處理，然後是外部的。 <button> 先處理元素的點擊事件，再處理<p> 元素的點擊事件。

默認情況下，addEventListener() 的第三個參數值為false ，這意味著它使用冒泡傳播。要改為使用捕獲傳播，請將第三個參數作為 true 傳遞 ：

const btn = document.querySelector('button');
const p = document.querySelector('p');

btn.addEventListener('click', (e) => {
    console.log(`Button is clicked!`);
}, true);

p.addEventListener('click', (e) => {
    console.log(`Paragraph is clicked!`);
});