JavaScript 自定义事件

2025年4月18日 | 阅读 11 分钟

JavaScript 开发人员还可以创建动态、交互式的网页。在其所有功能中，事件驱动版本是最重要的功能之一。JavaScript 事件与特定的活动或行为通信，例如用户交互（点击、滚动、表单提交）或浏览器状态更改（加载、调整大小等）。尽管 Web 开发者经常使用内置事件（例如 click、load、keypress 等），但在某些情况下，这些预设事件无法满足特定需求。这时自定义事件就很有用。

开发人员可以创建自定义事件并实施针对其应用程序需求而设计的事件处理方法。本综合参考资料涵盖了 JavaScript 自定义事件的语法、用法、基本概念和高级概念。

1. 事件驱动模型

JavaScript 功能的一个主要部分是事件驱动的；这意味着代码经常会响应事件而运行。典型事件包括：

鼠标事件包括 mouseover、dblclick 和 click。
键盘事件包括 keydown、keypress 和 keyup。
文档事件：scroll、visibilitychange 和 DOMContentLoaded。
表单事件：input、focus、blur、submit。

使用 addEventListener 方法将事件监听器绑定到 DOM 元素，可以触发特定事件，从而在事件发生时调用特定的函数。

document.querySelector('button').addEventListener('click', function() {
  console.log('Button clicked!');
});   

尽管 JavaScript 中存在许多标准事件，但对于需要特定逻辑的复杂应用程序，自定义事件非常有用。

2. 什么是自定义事件？

在 JavaScript 中，不是常规 DOM 事件之一，而是由开发人员创建的事件称为自定义事件。它使开发人员能够创建和触发自己的事件，以响应特定行为或操作。当您想捕获未通过预设事件表示的行为或操作时，自定义事件是可用且可访问的。

例如，您可能希望在实时聊天应用程序中出现新消息时触发一个事件。此事件表示您应用程序中的行为或状态更改，即使它可能与任何当前鼠标或键盘事件无关。

3. 创建自定义事件

在 JavaScript 中，CustomEvent 构造函数用于创建和分派自定义事件。它允许您设置一个可选的配置对象，该对象在事件调用之外包含更多与事件相关的信息。

EventName：自定义事件的名称，表示为字符串。

EventData：一个可选对象，其 detail 属性可以包含其他数据。

// Create a custom event called 'myCustomEvent.'
let customEvent = new CustomEvent('myCustomEvent', {
  detail: {
    message: 'Hello, World!',
    time: new Date(),
  }
});
// Add an event listener to an element
document.querySelector('div').addEventListener('myCustomEvent', function(event) {
  console.log(event.detail.message);  // Output: Hello, World!
  console.log(event.detail.time);     // Output: Current Date and Time
});
// Dispatch the custom event
document.querySelector('div').dispatchEvent(customEvent);  

通过在 detail 属性中添加一些额外信息，我们创建了一个名为 myCustomEvent 的自定义事件。

我们在一个 div 元素上监听 myCustomEvent。

当事件被触发（分派）时，事件监听器会记录来自 detail 属性的数据。

4. 自定义事件属性

CustomEvent 构造函数允许在创建自定义事件时定义多个属性。这些属性包括：

Bubbles：一个布尔值，表示事件是否应在 DOM 中冒泡。默认值为 false。

Cancelable：一个布尔值，指示是否可以取消事件。默认值为 false。

Composed: A Boolean price that signifies if the occasion should unfold past the shadow DOM.
let customEvent = new CustomEvent('myCustomEvent', {
  detail: { message: 'This is a custom event' },
  bubbles: true,
  cancelable: true,
  composed: false
});   

5. 分派自定义事件

创建自定义事件后，可以使用 DOM 元素的 dispatchEvent 方法来分派它。此方法触发事件，导致调用任何相关的事件监听器。

如果 bubble 属性设置为 true，事件将通过 DOM 树冒泡，允许父元素捕获事件。

应用

1. Web 应用程序的组件通信

在现代 Web 应用程序中，自定义事件最常见的实现之一是允许组件之间的通信。自定义事件允许子组件与父组件或兄弟组件通信，同时使用类似 React、Vue.js 或 Angular 的基于组件的库和框架，而无需将组件紧密耦合。

示例

HTML
<!-- Child Component (Button) -->
<button id="child button">Click Me</button>   

// Child Component JavaScript
const button = document.getElementById('childButton');
// Create and dispatch a custom event when the button is clicked
button.addEventListener('click', () => {
  const event = new CustomEvent('buttonClicked', { detail: { clicked: true } });
  button.dispatchEvent(event);
});   

考虑一个常见场景，即子组件需要向父元素警报用户交互，例如单击按钮或更改输入。

// Parent Component JavaScript
document.getElementById('childButton').addEventListener('buttonClicked', function (event) {
  console.log('Button clicked:', event.detail.clicked);  // Output: true
});   

通过这样做，功能被分离，允许子组件独立运行，而父组件可以根据需要响应事件或更改。

2. 在复杂用例中管理状态转换

在大型应用程序中跟踪应用程序状态至关重要。自定义事件可以帮助将状态更改广播到应用程序中需要响应的任何部分，从而节省手动处理每个组件中的状态更改的时间和精力。

示例：用户身份验证状态的更改

当用户登录或注销需要身份验证的 Web 应用程序时，多个不同的组件可能需要做出响应（例如，用户名显示在页眉中，仪表板显示用户特定信息，或者导航栏隐藏访客专用的链接）。

// 用户登录时，分派自定义事件以通知应用程序的其他部分

function user login(userData) {
  const loginEvent = new CustomEvent('userLoggedIn', { detail: userData });
  document.dispatchEvent(loginEvent);
}   

任何需要根据登录状态调整其状态的组件都可以监听 userLoggedIn 事件。

document.addEventListener('userLoggedIn', function (event) {
  console.log('User logged in:', event.detail.username);
  updateHeaderWithUser(event.detail.username);
  loadUserDashboard(event.detail);
});   

这允许一种模块化方法，即当用户的身份验证状态更改时，应用程序的多个部分可以同时更新。

3. 使用轮询或 WebSockets 更新服务器端数据

在需要从服务器获取数据的应用程序中（例如，使用 WebSockets 或长轮询的实时应用程序），可以使用自定义事件来通知应用程序的各个部分新的数据到来。

例如，聊天应用程序中的实时通知

在聊天应用程序中，可以使用 WebSocket 连接从服务器接收消息。当消息到达时，可以使用自定义事件将新消息广播到最相关的组件。

// Simulate receiving a new chat message from the server
function onNewMessageFromServer(message) {
  const messageEvent = new CustomEvent('newChatMessage', { detail: { message: message } });
  document.dispatchEvent(messageEvent);
}
// WebSocket event
const socket = new WebSocket('ws://example.com/chat');
socket.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);
  onNewMessageFromServer(data);
});   

通过监听 newChatMessage 事件，显示聊天消息的组件可以更新 UI。

document.addEventListener('newChatMessage', function (event) {
  const messageContainer = document.getElementById('messages');
  const newMessage = document.createElement('div');
  newMessage.innerText = event.detail.message.text;
  messageContainer.appendChild(newMessage);
});   

这种架构简化了处理实时数据，尤其是在多个组件需要响应同一事件（例如更新其他用户界面、消息历史记录或通知）的情况下。

4. 用于解耦和模块化的个性化事件

在开发模块化系统时，自定义事件可以在分离不同的功能组件方面发挥关键作用。这使得程序更容易维护、测试和随着时间的推移而扩展。组件不是直接交互，而是可以分派事件，处理这些事件的通用逻辑可以驻留在其他地方。

模块化表单验证

考虑一个需要多个输入字段验证后才能提交的表单。通过为每个输入字段分派特定的验证事件，您可以让单独的组件处理其验证，而不是拥有一个单一的、整体的验证机制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.js">
</head>
<body>
    <form id="user form">
  <input type="text" id="username" />
  <input type="email" id="email" />
  <button type="submit">Submit</button>
</form>

</body>
</html>   

//form validation custom event
document.getElementById('userForm').addEventListener('submit', function (event) {
  event.preventDefault();
  
  // Trigger validation events for each input field
  document.getElementById('username').dispatchEvent(new CustomEvent('validateInput'));
  document.getElementById('email').dispatchEvent(new CustomEvent('validateInput'));
});
// Handle validation in modular components
document.getElementById('username').addEventListener('validateInput', function (event) {
  const username = event.target.value;
  if (username.length < 5) {
    console.log('Username must be at least 5 characters');
  } else {
    console.log('Username valid');
  }
});
document.getElementById('email').addEventListener('validateInput', function (event) {
  const email = event.target.value;
  if (!email.includes('@')) {
    console.log('Invalid email');
  } else {
    console.log('Email valid');
  }
});   

通过为每个输入字段的验证逻辑承担独立责任，这简化了整体表单并便于维护。

输出

5. 单页应用程序 (SPA) 中的组件通信

组件通信是单页应用程序 (SPA) 的一个主要方面，而自定义事件对于保持组件之间的松散耦合至关重要。自定义事件允许组件保持模块化，同时允许它们根据需要进行通信，无论您使用的是纯 JavaScript 还是 React、Vue 或 Angular 等较新的框架。

React 组件通过自定义事件进行通信

自定义事件可以用于没有直接父子关系的组件之间的通信，尽管 React 通常使用 props 和 context 进行通信。

// Child Component
import React from 'react';
export default function ChildComponent() {
  const handleClick = () => {
    const event = new CustomEvent('childEvent', { detail: { data: 'Hello from Child' } });
    window.dispatchEvent(event);
  };
  return <button onClick={handleClick}>Click Me</button>;
}
// Parent Component
import React, { useEffect } from 'react';
import ChildComponent from './ChildComponent';

export default function ParentComponent() {
  useEffect(() => {
    const handleCustomEvent = (event) => {
      console.log(event.detail.data); // Output: Hello from Child
    };

    window.addEventListener('childEvent', handleCustomEvent);

    return () => {
      window.removeEventListener('childEvent', handleCustomEvent);
    };
  }, []);

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent />
    </div>
  );
}   

在此示例中，父组件监听子组件触发的自定义事件。在普通 React 数据流（props 向下，事件向上）不起作用的情况下很有用。

优点

1. 解耦组件以实现更好的模块化

使用自定义事件的主要优点之一是解耦 Web 应用程序组件。解耦是允许组件或模块独立于彼此运行的过程，而无需紧密耦合或直接依赖彼此。这导致了一种模块化结构，其中组件不通过函数调用或共享状态直接连接，而是通过事件连接。

解耦如何提供帮助

可重用性：单个组件可以在应用程序的其他部分甚至不同的项目中重用，而无需更改。

可维护性：代码更易于维护，因为组件没有紧密耦合，这可以防止一个组件的更改对其他组件产生意外影响。

可测试性：通过能够单独测试解耦的组件，单元测试变得更容易。

2. 增强不同应用程序组件之间的交互

自定义事件提供了一种方便的组件通信方式，尤其是在需要多个组件相互通信的复杂系统中。自定义事件通过允许两个组件在不知道彼此内部工作原理的情况下进行通信来实现间接通信。一个组件可以触发一个事件，而另一个组件可以监听它。

这如何改善沟通

灵活性：组件能够随时随地根据需要对其做出响应，而无需显式链接到触发事件的组件。

可伸缩性：随着应用程序变得越来越庞大和复杂，维护直接通信拓扑变得越来越困难。自定义事件实现了可伸缩的事件驱动架构。

简单性：自定义事件简化了直接引用组件。

3. 更易于维护和更整洁的代码

通过分离多个结构或组件的通用逻辑，自定义事件有助于构建更整洁的代码。开发人员可以使用自定义事件在整个应用程序中触发特定操作，而不是手动将事件处理程序或回调链接在一起。这种方法有助于改进逻辑组织并防止回调地狱。

这对可维护性有何影响

关注点分离：使用自定义事件，程序员可以轻松地划分各种应用程序组件之间的边界，从而实现更结构化和模块化的应用程序。

自定义事件促进了事件驱动的编程范例，该范例将操作与其触发器分开。这被称为事件驱动的架构。用户交互和数据更改的管理因此变得更出色。

4. 增强的灵活性和可扩展性

通过允许开发人员定义自己的事件类型以及与之相关的特定数据，自定义事件提供了灵活性。这消除了重写大部分代码以添加新功能并使其与现代功能保持一致的需要。

这如何增强灵活性

自定义行为：为了更精确地处理用户操作和系统事件，开发人员可以设计出适用于应用程序需求的专门事件。

事件链：可以将自定义事件链接成一个序列，其中一个事件触发另一个事件。这在多步或复杂的工作流程中可能很有用。

添加新功能：为了限制更改核心逻辑的需要，可以添加监听现有自定义事件的新功能或组件。

5. 异步处理事件

JavaScript 的异步编程策略与自定义事件配合良好。事件监听器允许异步执行事件驱动的逻辑，因为它们是非阻塞的。这对于需要有效处理数据库查询、API 调用和数据流等操作的现代 Web 应用程序尤其有用。

对异步应用程序的好处

非阻塞执行：事件监听器不会阻塞主线程，因此在等待事件发生时，其他操作可以继续运行。

更好的用户体验：发生异步事件的自定义事件有助于开发响应式用户界面，这些界面可以立即响应用户输入，而不是等待耗时操作的完成。

任务调度：使用 setTimeout、setInterval 或 Promises 的自定义事件来根据特定触发器安排任务。

6. 大型应用程序的性能提升

通过集中事件处理逻辑和减少直接函数调用，自定义事件可以提高大型应用程序的整体性能。事件委托允许在高级别（例如，在 document 或 body 元素上）分派自定义事件，从而无需将多个事件监听器附加到不同的元素。

这如何提高性能

事件委托：自定义事件可以与事件委托一起使用，以从一个父元素处理多个事件，从而无需将事件监听器附加到多个单独的 DOM 元素。

减少开销：通过消除不必要的事件处理程序，自定义事件可以帮助开发人员节省内存并提高应用程序速度。

结论

JavaScript 自定义事件是构建更模块化、更灵活、更易于维护的 Web 应用程序的重要工具。

自定义事件通过允许开发人员创建自己的事件，改善了代码组织，解耦了组件，并促进了通信，尤其是在复杂应用程序中。

它们还提供事件驱动的架构，可提高可伸缩性和响应能力，并与同步和异步操作良好集成。

采用自定义事件通过产生更简洁、更易于维护的代码以及更直观、解耦的架构，从而在应用程序开发中实现更快的开发和长期的可持续性。

下一主题Array Replace JavaScript

JavaScript 自定义事件

1. 事件驱动模型

2. 什么是自定义事件？

3. 创建自定义事件

4. 自定义事件属性

5. 分派自定义事件

应用

1. Web 应用程序的组件通信

2. 在复杂用例中管理状态转换

3. 使用轮询或 WebSockets 更新服务器端数据

4. 用于解耦和模块化的个性化事件

5. 单页应用程序 (SPA) 中的组件通信

优点

1. 解耦组件以实现更好的模块化

2. 增强不同应用程序组件之间的交互

3. 更易于维护和更整洁的代码

4. 增强的灵活性和可扩展性

5. 异步处理事件

6. 大型应用程序的性能提升

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 自定义事件

1. 事件驱动模型

2. 什么是自定义事件？

3. 创建自定义事件

4. 自定义事件属性

5. 分派自定义事件

应用

1. Web 应用程序的组件通信

2. 在复杂用例中管理状态转换

3. 使用轮询或 WebSockets 更新服务器端数据

4. 用于解耦和模块化的个性化事件

5. 单页应用程序 (SPA) 中的组件通信

优点

1. 解耦组件以实现更好的模块化

2. 增强不同应用程序组件之间的交互

3. 更易于维护和更整洁的代码

4. 增强的灵活性和可扩展性

5. 异步处理事件

6. 大型应用程序的性能提升