如何在 JavaScript 中创建自定义事件？

2024-04-11
福建
本文字数：1934 字
阅读完需：约 6 分钟

理解 JavaScript 中的事件

在深入研究自定义事件之前，我们首先了解 JavaScript 中事件的概念。事件是浏览器中发生的操作或事件，由用户交互（如单击、鼠标移动或键盘输入）或浏览器本身（如页面加载、调整大小等）触发。 JavaScript 提供了强大的事件处理机制来捕获和响应这些事件。

为什么要定制事件？

虽然内置事件处理常见交互，但自定义事件具有以下优点：

特异性：它们表示您的应用程序中的独特操作。想象一下购物车的“itemAdded”事件或游戏中的“levelCompleted”事件。

解耦：创建事件的代码（如表单提交）与侦听事件的代码（如更新进度条）是分开的。这提高了代码的可维护性。

数据传输：您可以使用详细属性将自定义数据附加到事件，从而允许传递信息性消息。

内置事件与自定义事件

JavaScript 附带了一组涵盖常见交互的内置事件。但是，在某些情况下，这些预定义事件可能还不够。这就是自定义事件发挥作用的地方。自定义事件使开发人员能够定义自己的事件类型，从而扩展了 JavaScript 中事件驱动编程的功能。

创建自定义事件涉及几个关键步骤

事件初始化：首先，我们需要使用 CustomEvent 构造函数初始化一个新的自定义事件。此构造函数采用两个参数：事件类型和一个可选对象，其中包含要与事件一起传递的任何其他数据。

// Create a new custom eventconst 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 eventdocument.addEventListener('customEventType', function(event) {    // Event handling logic here    console.log('Custom event triggered with data:', event.detail);});

复制代码

实例：自定义 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 changesdocument.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 eventdocument.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 事件，我们为增强交互性并在网络上提供更丰富的用户体验提供了可能性。

技术前沿拓展

前端开发，你的认知不能仅局限于技术内，需要发散思维了解技术圈的前沿知识。细心的人会发现，开发内部工具的过程中，大量的页面、场景、组件等在不断重复，这种重复造轮子的工作，浪费工程师的大量时间。

介绍一款程序员都应该知道的软件JNPF快速开发平台，很多人都尝试用过它，它是功能的集大成者，任何信息化系统都可以基于它开发出来。

这是一个基于 Java Boot/.Net Core 构建的简单、跨平台快速开发框架。前后端封装了上千个常用类，方便扩展；集成了代码生成器，支持前后端业务代码生成，实现快速开发，提升工作效率；框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用；后端框架支持 Vue2、Vue3。如果你有闲暇时间，可以做个知识拓展。

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

发布于: 刚刚阅读数: 3

这我可不懂

关注

低代码技术追随者，为全民开发而努力 2023-02-15 加入

大家好，我是老王，专注于分享低代码图文知识，感兴趣的伙伴就请关注我吧！

发布

暂无评论

创作场景

如何在 JavaScript 中创建自定义事件？

理解 JavaScript 中的事件

为什么要定制事件？

内置事件与自定义事件

创建自定义事件涉及几个关键步骤

实例：自定义 textSelect 事件

结论

技术前沿拓展

这我可不懂

评论