【JS】2029- 如何创建 JavaScript 自定义事件？
【JS】2029- 如何创建 JavaScript 自定义事件？
假设，你正在构建一个复杂的 web 应用程序，你想到了可以预构建例如click和submit这样的事件，这很好，但如果你需要更特殊一点怎么办？
这就需要自定义事件登场了。
自定义事件允许你通过 JavaScript 代码创建和触发自己的事件，允许在应用程序的不同部分之间进行更细微的通信。
了解 JavaScript 中的事件
在深入研究自定义事件之前，我们先来了解一下 JavaScript 事件的概念。
事件是浏览器中发生的操作或改变，或由用户交互（如单击、鼠标移动或键盘输入），或由浏览器本身（如页面加载、调整大小等）触发。
JavaScript 提供了可靠的事件处理机制来捕获和响应这些事件。
为什么选择自定义事件？
虽然我们有内置事件可以处理常见的交互，但自定义事件拥有不可替代的以下优点：
- 特异性：表示应用程序中的唯一操作。例如，只有购物车才有
itemAdded事件，只有游戏才有levelCompleted事件。 - 解耦：分离了创建事件（如表单提交）的代码与侦听事件（如更新进度条）的代码。提高了代码的可维护性。
- 数据传输：可以使用
detail属性将自定义数据附加到事件，从而允许传递信息性消息。
内置事件 vs. 自定义事件
JavaScript 附带了一组涵盖常见交互的内置事件。
但是，在某些情况下，这些预定义的事件可能远远不够。这就需要我们创建自定义事件了。
自定义事件允许开发人员自己定义事件类型，扩展了 JavaScript 事件驱动编程的能力。
创建自定义事件的关键步骤
- 事件初始化：首先，我们需要使用
CustomEvent构造函数初始化新的自定义事件。 构造函数有两个参数：事件类型和可选对象，可选对象包含要随事件一起传递的所有其他数据。
// Create a new custom event
const customEvent = new CustomEvent('customEventType', {
detail: { key: 'value' } // Optional additional data
});
- 调度事件：初始化自定义事件后，我们就可以使用
dispatchEvent()方法在特定的 DOM 元素上进行调度。
// Dispatch the custom event on a DOM element
document.dispatchEvent(customEvent);
- 订阅自定义事件：为了响应自定义事件，我们需要将事件侦听器添加到目标元素中。 事件侦听器“侦听”特定事件类型，并在特定事件发生时执行函数。
// Add an event listener for the custom event
document.addEventListener('customEventType', function(event) {
// Event handling logic here
console.log('Custom event triggered with data:', event.detail);
});
实例演示
下面让我们用一个实例来说明自定义事件的概念。
假设web应用程序中有一段文本。我们创建的自定义textSelect事件是：每当用户在web 应用程序中选择这段文本时，就会触发事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Selection Event</title>
</head>
<body>
<p>Select some text in this paragraph to trigger the event.</p>
<script>
// Event Initialization: Listen for selection changes
document.addEventListener('selectionchange', function() {
const selection = window.getSelection().toString();
if (selection) {
// Dispatching the Event: Dispatch custom event with selected text
document.dispatchEvent(new CustomEvent('textSelect', { detail: { selectedText: selection } }));
}
});
// Subscribing to Custom Events: Subscribe to the textSelect event
document.addEventListener('textSelect', function(event) {
// Log the selected text to the console
console.log('Selected text:', event.detail.selectedText);
});
</script>
</body>
</html>
复制代码后，在代码编辑器中运行实时服务器。在本地服务器中打开开发人员工具的话，会看到如下效果：
假如我双击选择文本，那么也会触发自定义事件，右侧开发人员工具中的日志会说明一切。
看，创建自定义事件也没有那么难，掌握诀窍之后，简直就是小菜一碟！
结论
虽然 JavaScript 本身不支持textSelect事件，但我们可以结合现有事件和 JavaScript 逻辑来模拟textSelect 事件。
创建自定义textSelect事件，不但增强了交互性，还在web上丰富了用户体验。
无论是突出显示所选文本、触发操作还是收集数据，textSelect事件的创建填补了web开发人员工具包的空白。编码愉快！
感谢阅读。