在 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()方法来阻止事件冒泡。
更多完整教程，请戳：
