在 Web 應用程式中，事件是使用者與應用程式互動的主要方式。Web API 提供了一些用於處理這些事件的介面，這些介面被稱為事件處理常式。事件處理常式是一個函式，用於響應事件的發生。
事件模型
Web API 的事件模型是基於釋出/訂閱模式的。在這種模式下，事件的發生被視為釋出一個訊息，而事件處理常式被視為訂閱該訊息。當事件發生時，所有訂閱了該事件的事件處理常式都會被呼叫。
在 Web API 中，事件模型由三個主要部份組成：事件、事件目標和事件處理常式。
事件
事件是發生在 Web 應用程式中的某些互動的抽象表示。例如，當使用者單擊按鈕時，可以觸發一個 click 事件。事件具有名稱和一組關聯的內容和方法。
在 Web API 中，事件通常作為物件表示，這個物件是 Event 型別的例項。Event 物件具有許多內容和方法，用於獲取有關事件的資訊以及操作事件的行為。
事件目標
事件目標是發生事件的物件。例如，如果使用者單擊一個按鈕，那麽按鈕就是事件目標。事件目標可以是任何元素、文件或瀏覽器視窗。
當事件目標上發生事件時，該事件被分發到事件目標及其祖先元素上的所有事件處理常式。
事件處理常式
事件處理常式是一個函式，用於響應事件的發生。事件處理常式被繫結到事件目標上，並在事件發生時被呼叫。事件處理常式可以是行內函式、命名函式或匿名函式。
事件型別
Web API 定義了許多不同型別的事件，每種型別的事件都與 Web 應用程式中的不同互動相關聯。以下是一些常見的事件型別：
事件處理常式
要響應事件的發生，需要建立一個事件處理常式。事件處理常式是一個函式，它被繫結到事件目標上，並在事件發生時被呼叫。
以下是一個簡單的範例，用於演示如何建立一個事件處理常式：
const
button
=
document
.
querySelector
(
'button'
);
function
handleClick
(
event
)
{
console
.
log
(
'Button clicked!'
);
}
button
.
addEventListener
(
'click'
,
handleClick
);
在這個範例中，我們首先獲取一個元素，它是一個<button>元素。然後，我們定義一個函式handleClick()作為事件處理常式。最後，我們使用addEventListener()方法將事件處理常式handleClick()繫結到<button>元素的click事件上。當<button>元素被點選時，事件處理常式handleClick()將被呼叫。
除了addEventListener()方法，還有另一種將事件處理常式繫結到事件目標上的方法，即將事件處理常式作為事件目標的內容值。例如：
const
button
=
document
.
querySelector
(
'button'
);
button
.
onclick
=
function
(
event
)
{
console
.
log
(
'Button clicked!'
);
}
在這個範例中，我們使用button.onclick內容來繫結一個函式作為事件處理常式。這種方法與addEventListener()方法的區別在於，當使用onclick內容繫結事件處理常式時，只能繫結一個處理常式，而使用addEventListener()方法可以繫結多個處理常式。
事件物件
事件處理常式的參數通常是事件物件event。事件物件是一個包含有關事件的資訊的物件，例如事件的型別、目標元素、滑鼠位置等等。
以下是一個簡單的範例，用於演示如何使用事件物件：
const
button
=
document
.
querySelector
(
'button'
);
function
handleClick
(
event
)
{
console
.
log
(
'Button clicked!'
);
console
.
log
(
'Event type:'
,
event
.
type
);
console
.
log
(
'Target element:'
,
event
.
target
);
console
.
log
(
'Mouse position:'
,
event
.
clientX
,
event
.
clientY
);
}
button
.
addEventListener
(
'click'
,
handleClick
);
button.addEventListener('click', handleClick); 在這個範例中，我們在事件處理常式handleClick()中使用事件物件event來輸出一些事件資訊，例如事件型別、目標元素、滑鼠位置等等。
阻止預設行為
有些事件會觸發預設行為，例如<a>元素的點選事件會導致頁面跳轉。如果希望阻止預設行為，可以使用preventDefault()方法。例如：
const
link
=
document
.
querySelector
(
'a'
);
link
.
addEventListener
(
'click'
,
function
(
event
)
{
event
.
preventDefault
();
console
.
log
(
'Link clicked, but default behavior prevented.'
);
});
在這個範例中，我們在點選<a>元素時使用事件物件event的preventDefault()方法來阻止預設行為（即頁面跳轉），並輸出一條訊息。
停止事件傳播
事件冒泡是指事件從最具體的元素開始，逐級向上傳播到較為抽象的元素。例如，如果在<div>元素內部有一個<button>元素，並在<button>元素上觸發了一個點選事件，那麽這個事件將沿著DOM樹向上冒泡，直到達到<html>元素為止。
如果希望阻止事件冒泡，可以使用stopPropagation()方法。例如：
const
button
=
document
.
querySelector
(
'button'
);
const
div
=
document
.
querySelector
(
'div'
);
button
.
addEventListener
(
'click'
,
function
(
event
)
{
console
.
log
(
'Button clicked!'
);
event
.
stopPropagation
();
});
div
.
addEventListener
(
'click'
,
function
(
event
)
{
console
.
log
(
'Div clicked!'
);
});
在這個範例中，我們在<button>元素上使用事件處理常式繫結了一個點選事件，並使用事件物件event的stopPropagation()方法來阻止事件冒泡。
更多完整教程，請戳：
