什么是事件侦听器？
事件侦听器是 JavaScript 中的一个函数，该函数等待事件发生然后对其进行响应。JavaScript 是开发人员用来制作交互式网页的编程语言。JavaScript 的事件侦听器函数允许您为鼠标点击、键盘点击和窗口大小调整等事件创建自定义响应。等待和响应实时事件的编程范式称为事件处理。
事件侦听器函数的语法是什么？
事件侦听器函数与其他 JavaScript 函数具有相似的特征。激活后，它会执行必要的操作来处理事件。例如，事件侦听器函数可以更改显示的文本、从注册表中收集信息或将数据存储在数据库中。
事件侦听器语法
事件侦听器函数遵循正确的 JavaScript 语法，如下一个示例所示。
function RespondMouseClick() {
document.getElementById("textdisplay1").innerHTML += "MouseClick happened" ;
}
此示例显示 RespondMouseClick 事件侦听器函数。通常编写函数名称以反映事件侦听器的用途。在函数中，您可以编写代码以在事件发生时执行特定的操作。在此示例中，该函数将文本 MouseClick happened 附加到 HTML 元素 textdisplay1 后。
事件处理程序语法
或者，您可以使用事件处理函数来响应激活的事件，如以下示例所示。
function eventHandler(event) {
if (event.type === "fullscreenchange") {
console.log (“full screen toggle”);
} else {
console.log (“full screen error”);
}
}
这允许您使用一个函数来管理来自特定元素的多种类型的事件。
例如，您可以注册一个事件侦听器来处理基于事件的应用程序上的所有类型的区块链事件。 有关更多信息，请阅读有关使用 Amazon Managed Blockchain 构建基于事件的应用程序的内容。
如何添加事件侦听器？
事件侦听器只有在添加到相应的 JavaScript 元素后，才会被激活。要执行此操作，可使用如下语法：
- element.addEventListener(event, listener);
- element.addEventListener(event, listener, useCapture);
- element.addEventListener(event, listener, options);
例如，开发人员可以调用以下函数，将点击事件侦听器绑定到按钮元素。
btn.addEventListener("click", RespondMouseClick);
您还可以在不覆盖现有事件处理程序的情况下向特定事件对象添加多个事件侦听器。
例如，Amazon Web Services (AWS) 允许开发人员在 AWS.Request 对象上链接多个回调。有关更多信息，请阅读“如何在 AWS 上使用请求对象事件侦听器”。
用于添加事件的参数
以下是对前面语法中参数的解释：
- 事件参数是任何有效的 JavaScript 事件，例如点击、更改、鼠标悬停、按下键和加载。
- 侦听器参数是为响应特定事件而创建的事件回调或 JavaScript 函数。
- useCapture 参数是一个可选参数，用于指示事件传播模式。它接受布尔值，其中 true 将激活捕获模式，false 将激活冒泡模式。此参数的默认值设置为 false。
- 选项参数由多个可选值组成，包括捕获模式和拒绝信号，它们代表侦听器的行为。
如何删除事件侦听器？
在您将其从关联的 JavaScript 元素中删除之前，事件侦听器将保持活动状态。您可以使用以下语法来执行此操作。
element.removeEventListener(type, listener, useCapture);
事件侦听器删除参数与用于添加事件侦听器的参数类似。移除事件侦听器时，必须指定相同的 type、listener和 useCapture 参数。如果不这样做，事件侦听器将保持活动状态，并继续针对将来的事件触发。
例如，您可以使用以下代码添加事件。
button.addEventListener("click", RespondMouseClick, true);
但是应用以下代码无法删除事件侦听器。这是因为 useCapture 值不同于在按钮对象中注册的值。
button.removeEventListener("click", RespondMouseClick, false);
要成功删除事件并防止其被触发，可以使用以下代码。
button.removeEventListener("click", RespondMouseClick, true);
嵌套事件侦听器函数的工作原理
嵌套事件侦听器是添加到不同层次结构的 HTML 元素的事件处理程序。
在以下 HTML 示例中，文档拥有底层父元素，而父元素拥有子元素。
<div class="document">
<div class="parent">
<div class="child"></div>
</div>
</div>
复杂的 Web 应用程序可能有多个具有相应事件侦听器函数的父-子层。特定事件发生时，会按特定顺序在不同层触发事件侦听器。例如，点击子按钮会将事件传播给捕获鼠标点击的所有处理程序。
事件可以在两种模式下传播：冒泡和捕获。
事件冒泡
冒泡是默认的 JavaScript 事件处理模式。它将事件从最内层传播到最外层。
例如，用户可以将鼠标悬停在子分区的文本框上。然后，应用程序可以按以下顺序传递事件：
- 子级中的事件侦听器处理鼠标悬停事件。
- 然后，父事件侦听器处理该事件并将控制权传递给文档的事件侦听器。
要设置事件冒泡，请使用以下语法：
- element.addEventListener(event, listener, [false]);
- element.addEventListener(event, listener);
事件捕获
事件捕获是 JavaScript 中的一种特殊事件处理模式，在该模式下，事件从最外层向内传播。一旦事件到达内层的目标元素，事件处理模式就会变为冒泡。然后，冒泡会将事件向外传播到最上层。
例如，用户可以点击子按钮并启动以下顺序：
- 文档事件侦听器处理鼠标点击事件，然后处理父事件处理程序。
- 事件到达目标元素，即按钮。按钮的事件侦听器将处理该事件。
- 事件处理从捕获模式切换到冒泡模式。
- 同样的鼠标点击事件在父级触发事件处理程序，然后在文档结束。
如何在冒泡和捕获模式之间做出选择
冒泡模式和捕获模式允许您以不同的方式处理事件。由于捕获模式足以处理应用程序中的大多数事件，因此很少使用冒泡模式。
在冒泡模式和捕获模式之间做出决定时，应考虑事件传播流程及其与应用程序编程逻辑的协调情况。
例如，假设一个父表单包含两个子元素。第一个元素需要在第二个元素发生事件时立即更新。在这种情况下，您应该使用捕获模式。它确保父事件侦听器处理事件并更新第一个元素。然后，它将控制权传递给第二个子元素的事件侦听器。
如何停止嵌套事件侦听器函数中的事件传播？
事件会一直传播，直至以嵌套的侦听器排列到达最终目的地。您必须采取特定的方法来阻止事件进一步传播。
以下方法可在事件侦听器上停止事件。
event.stopPropagation();
例如，如果您在子按钮处调用 StopPropagation ，则鼠标点击事件不会传播到父级和文档级别。因此，不会触发更高级别的事件侦听器。
停止所有事件传播
StopPropagation 仅阻止当前类型事件的传播。如果该对象注册了不同类型的事件侦听器，则尽管调用了 StopPropagation，仍会触发事件传播。
要停止与特定对象相关的所有事件，可以使用 StopImmediatePropagation 方法，如下所示。
event.stopImmediatePropagation();
当一个事件侦听器调用 StopImmediatePropagation 时，不会触发与该对象关联的其他事件侦听器。
AWS 如何支持您的 JavaScript 要求？
Amazon Web Services (AWS) 提供适用于 JavaScript 的 AWS SDK，让您可以通过库和 API 在应用程序中轻松使用服务。
您可以使用 SDK 开发服务器端、Web 和移动 Web 应用程序。SDK 支持 JavaScript 运行时系统、Node.JS 和 React Native 以及跨运行时系统。这允许开发人员在不同的平台上运行相同的客户端服务包。
使用 SDK 的其他优势还包括：
- SDK 是以 TypeScript 语言编写的。这带来了诸如静态类型检查以及类和模块支持等优势。
- SDK 提供中间件堆栈，允许您引入自定义操作。
- SDK 采用模块化架构。这让您可以仅使用必要的包来优化应用程序性能。
立即注册 AWS 账户，开始使用 JavaScript 应用程序。
