浏览器中的 JavaScript 代码使用事件驱动的编程模式。这意味着，当浏览器中发生特定的 DOM 事件时，将执行一段代码作为对该操作的响应。
在本文中，我将帮助您了解和理解如何使用 JavaScript 监听和响应 DOM 事件。
如果你需要复习一下 DOM，我写了一篇文章来解释 DOM 是什么以及 JavaScript 如何与之交互。
什么是 DOM 事件，为什么它们有用？
DOM 事件是浏览器公开的信号，可用于运行一段 JavaScript 代码。
当用户与我们创建的应用程序交互时，例如单击按钮或在输入字段中键入字母，就会发生这些 DOM 事件。
作为 Web 开发人员，您可以指示 JavaScript 侦听特定事件并执行一些操作来响应该事件。
例如：
单击按钮时，请更改段落的文本。
提交表单后，使用 Fetch API 执行 POST 请求。
在本文中，我将帮助您了解和理解如何使用 JavaScript 监听和响应 DOM 事件。
如何侦听 DOM 事件
若要侦听事件，需要使用该方法将事件侦听器附加到元素。addEventListener()
该方法接受两个参数：addEventListener()
要听的活动type
触发事件时要运行的函数
Element.addEventListener(type, function);
addEventListener（） 方法语法
回到示例，假设您要在单击元素时更改段落的文本。这是你如何做到的：button
<body>
<p id="myParagraph">This is an example paragraph</p>
<button id="changeText">Change Text</button>
<script>
const button = document.querySelector('#changeText');
function newText(event) {
const p = document.querySelector('#myParagraph');
p.innerText = 'The text has been changed';
}
button.addEventListener('click', newText); </script></body>
使用 addEventListener（） 方法的示例
要将 JavaScript 代码插入到 HTML 文档中，我们需要使用如上所示的标签。script
使用 method 选择按钮元素，然后在该元素上调用该方法。这意味着您将事件侦听器附加到按钮。document.querySelector()addEventListener()
首先，指定要侦听的事件，在本例中为事件。接下来，指定在发生该事件时要运行的函数。typeclick
在上面的代码中，函数将在事件被触发时执行。newTextclick
事件侦听器还将发送一个对象，该对象携带有关触发的事件的信息。这就是为什么上面的函数中有一个参数。eventeventnewText
您可以将事件记录到控制台以查看其详细信息：
function newText(event) {
console.log(event);}
记录事件对象
如果再次单击该按钮，将获得以下输出：
事件对象日志事件对象日志示例
根据触发事件时要执行的操作，可能需要使用对象中包含的信息。event
在这里，我们要做的就是更改段落的文本，因此不需要对象。稍后，我们将在处理键盘事件时看到使用该对象的示例。eventevent
您可以在浏览器中收听许多事件。以下是开发 Web 应用程序时可能需要的一些最常见的事件：
事件 事件被触发
点击 当您按下并松开鼠标主按钮时。用于跟踪按钮和可点击的电子设备
鼠标移动 移动鼠标光标时
鼠标悬停 当您将鼠标光标移到元素上时。这就像CSS悬停状态
鼠标输出 当鼠标光标移动到元素边界之外时
dblclick 当您点击两次时
DOMContentLoaded 当 DOM 内容完全加载时
键盘 当您按下键盘上的某个键时
键控 当您松开键盘上的某个键时
提交 提交表单时
如果您想阅读 DOM 事件类型的完整列表，可以访问此页面。
DOM 事件分为几类。在这里，我们将只看一下你可能在项目中使用的两个最常见的事件：键盘和鼠标事件。
键盘事件
对于键盘，您可以跟踪 和 事件，这些事件分别在您按下和释放键时运行。keydownkeyup
若要显示示例，请从控制台运行以下代码：
document.addEventListener('keydown', event => {
console.log(`A key is pressed: ${event.key}`);});document.addEventListener('keyup', event => {
console.log(`A key is released: ${event.key}`);});
捕获键盘事件
运行上述代码后，缓慢按下键盘上的一个键，然后缓慢松开。
您应看到如下所示的日志输出：
键盘事件日志记录键控和键控事件
请注意，只要您按下一个键，就会显示“keydown”日志，并且“keyup”日志仅在您松开该键时显示。
键盘事件通常附加到对象而不是特定元素，因为整个网站应该能够侦听该事件。document
鼠标事件
除了键盘事件之外，DOM 还提供了一种跟踪任何鼠标事件的方法。
您可以跟踪的最常见的鼠标事件是：
mousedown– 按下鼠标按钮
mouseup– 鼠标按钮被释放
click– 点击事件
dblclick– 双击事件
mousemove– 当鼠标移动到元素上时
contextmenu– 当上下文菜单打开时，例如单击鼠标右键
同样，您可以通过直接向对象添加事件侦听器来测试这些事件：document
document.addEventListener('mousedown', event => {
console.log(`The mouse is pressed`);});document.addEventListener('mouseup', event => {
console.log(`The mouse is released`);});
捕获鼠标事件
运行上面的代码，然后单击浏览器中的任意位置。您应该会看到分别记录的 和 事件。mousedownmouseup
如何删除事件侦听器
若要删除附加到元素的事件侦听器，需要调用该方法，将 of 事件和传递给该方法的 传递给该方法，如下所示：removeEventListener()typefunctionaddEventListener()
button.removeEventListener('click', newText);
删除事件侦听器的示例
上面的代码足以从元素中删除“click”事件侦听器。请注意，您需要如何在元素上调用方法，同时将函数传递给该方法。buttonremoveEventListener()newText
若要正确删除事件侦听器，需要具有对附加到事件的函数的引用。如果将无名函数传递给该方法，则无法删除该事件：addEventListener()
button.addEventListener('click', function (event) {
alert('Button save is clicked');});
无法删除无名称函数
如果没有上述示例中的函数名称，您将无法删除事件侦听器。
如何使用 HTML 属性侦听事件
除了使用该方法之外，您还可以通过将属性添加到 HTML 元素来侦听事件。addEventListener()on[eventname]
例如，假设您要收听按钮单击。您可以按如下方式将属性添加到按钮：onclick
<body>
<button onclick="handleClick()">Click Me!</button>
<script>
function handleClick(event) {
alert('The button is clicked!');
} </script></body>
使用 onclick HTML 属性侦听 click 事件
在上面的 button 元素中，我们添加属性并将函数传递给它。onclickhandleClick()
当我们单击该按钮时，该功能将被执行。handleClick()
您还可以使用 JavaScript 添加属性，如下所示：onclick
<body>
<button id="myBtn">Click Me!</button>
<script>
const myBtn = document.querySelector('#myBtn');
myBtn.onclick = handleClick;
function handleClick(event) {
alert('The button is clicked!');
} </script></body>
使用 onclick 属性的示例
在这里，我们使用 JavaScript 将对函数的引用分配给属性。handleClickonclick
若要删除 onclick 属性，可以将该属性分配给 null：
const myBtn = document.querySelector('#myBtn');myBtn.onclick = null;
将 onclick 属性分配给 null
你应该使用哪一个？
正如你所看到的，有两种方法可以监听 DOM 事件：方法和 HTML 属性。你应该使用哪一个？addEventListener()on[eventname]
答案是，当您需要更多扩展性时可以使用该方法，当您希望事情简单时可以使用该方法。addEventListener()on[eventname]
在开发 Web 应用程序时，文件应仅用作页面的结构，而文件应定义 Web 应用程序可以具有的任何行为。.html.js
为了使应用程序更易于维护和扩展，JavaScript 应该可以访问 HTML 元素，但任何 HTML 元素都不能执行 JavaScript 函数。这就是为什么应该是推荐的方法。addEventListener()
但这并非没有代价：你用冗长来交换可扩展性，使你的代码阅读起来非常麻烦。addEventListener()
使用该属性时，只需在 HTML 元素中指定函数名称：on[eventname]
<body>
<button onclick="handleClick()">Click Me!</button>
<script>
function handleClick(event) {
alert('The button is clicked!');
} </script></body>
onclick 属性提供了简单性
但是当你使用该方法时，你需要查询你需要的元素，调用该方法，然后指定要运行的事件和回调函数：addEventListener()
<body>
<button id="myBtn">Click Me!</button>
<script>
const myBtn = document.querySelector('#myBtn');
myBtn.addEventListener('click', handleClick);
function handleClick(event) {
alert('The button is clicked!');
} </script></body>
addEventListener（） 方法提供可扩展性
如上所述，使用该属性时，还有两行不需要编写。on[eventname]
虽然它可能看起来微不足道，但当您处理具有许多 HTML 和 JS 文件的大型应用程序时，这将是一个严重的问题。
此外，该方法还允许您将多个侦听器附加到同一元素，如下所示：addEventListener()
<body>
<button id="myBtn">Click Me!</button>
<script>
const myBtn = document.querySelector('#myBtn');
myBtn.addEventListener('click', handleClick);
myBtn.addEventListener('click', handleClickTwo);
function handleClick() {
console.log('Run from handleClick function');
}
function handleClickTwo() {
console.log('Run from handleClickTwo function');
} </script></body>
addEventListener（） 允许您分配多个侦听器
当您单击上面的按钮时，JavaScript 将执行两个事件侦听器。
对于该属性，这是不可能的，因为一次只能将一个函数指定为引用：onclick
<body>
<button id="myBtn">Click Me!</button>
<script>
const myBtn = document.querySelector('#myBtn');
myBtn.onclick = handleClick;
// when you assign a new function to onclick,
// the old function is overwritten
myBtn.onclick = handleClickTwo;
function handleClick() {
console.log('Run from handleClick function');
}
function handleClickTwo() {
console.log('Run from handleClickTwo function');
} </script></body>
但是我从来没有遇到过需要两次收听同一事件的情况，所以这个优势可能根本没有用。
结论
浏览器公开的 DOM 事件使您能够以适当的方式响应用户操作。
这种使用事件侦听器执行特定任务的模式称为事件驱动编程，在使用 JavaScript 开发 Web 应用程序时，您将经常使用此模式。
有两种方法可以侦听事件：使用 JavaScript 方法和 HTML 属性。每种方法都有其优点和缺点，因此最好同时熟悉两者。addEventListener()on[eventname]