如何在JavaScript中创建自定义事件给DOM元素使用？

大家好，我是梦兽编程。欢迎回来与梦兽编程一起学习。先加入微信群与梦兽一起交流(javascript，Rust，Golang，Node)可以微信搜索【梦兽编程】公众号回复111即可加入交流群与梦兽进行交流。

今天向大家介绍一个JavaScript的特效，自定义事件。想象一下你正在构建一个复杂的应用，我们可能会使用预设浏览器起客户端事件如onClick 、onSubmit 我们很方便的实现了与浏览器GUI的事件通信。

❝

如果有QT客户端开发的同学应该知道我在说什么。

❞

但如果您需要更加特定的事件呢？这就是自定义事件的用武之地-让您的 JavaScript 代码创建和触发自己的事件，从而实现应用程序不同部分之间更细致的通信。

「理解 JavaScript 中的事件」

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

自定义事件的好处

1. ***特定性：***它们可以表示应用程序内部的独特动作，例如添加”事件或完成”事件。
2. ***解耦：***创建事件的代码（如表单提交）与监听事件的代码（如更新进度条）是分离的，这提高了代码的可维护性。
3. ***数据传输：***您可以使用 detail 属性附加自定义数据到事件上，允许传递有意义的消息。
4. 不需要使用额外的第三方库，如mit

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

1. **「定义自定义事件」**使用CustomEvent 构造函数创建自定义事件对象。

const myCustomEvent = new CustomEvent('my-custom-event', {
  detail: { message: '这是我的自定义事件' }
});

在这里,'my-custom-event' 是事件名称，{ message: '这是我的自定义事件' } 是事件的额外数据。

1. **「监听自定义事件」**使用addEventListener 方法监听自定义事件

document.addEventListener('my-custom-event', (event) => {
  console.log(event.detail.message); // 输出 '这是我的自定义事件'
});

1. **「触发自定义事件」**使用dispatchEvent 方法触发自定义事件

document.dispatchEvent(myCustomEvent);

通过这种方式，您可以在 JavaScript 中创建和触发自定义事件，实现组件间的通信和事件驱动的应用程序架构。这为您提供了更灵活和可扩展的事件管理系统。

实际案例

假设我们的 Web 应用程序中有一段文本，我们可以创建一个自定义事件，每当用户在我们的 Web 应用程序中选择这段文本时触发该事件。

const textSelectEvent = new CustomEvent('textSelect', {
  detail: {
    selectedText: window.getSelection().toString()
  }
});

在这里，我们创建了一个新的 CustomEvent 对象，事件名称为 'textSelect',并将选中的文本作为 detail 属性附加到事件上。注意自定义事件更多的操作是window对象，也就是浏览器对象。因为你是要把当前GUI的信息发送到对应的DOM元素中。

const textElement = document.getElementById('my-text');
textElement.addEventListener('textSelect', (event) => {
  console.log('用户选择的文本:', event.detail.selectedText);
});

我们选择目标元素（在本例中是 ID 为 'my-text' 的元素），并为自定义 'textSelect' 事件添加事件监听器。

textElement.addEventListener('mouseup', () => {
  if (window.getSelection().toString().trim() !== '') {
    textElement.dispatchEvent(textSelectEvent);
  }
});

在这里，我们监听目标元素上的内置 'mouseup' 事件。当用户释放鼠标按钮后进行文本选择时，我们检查所选文本是否不为空，如果是，则使用 dispatchEvent() 触发自定义 'textSelect' 事件。

兼容性

几乎所有的浏览器都支持

「结论」

虽然 JavaScript 本身不支持 textSelect 事件，但我们可以通过结合现有事件和 JavaScript 逻辑来模拟实现它。通过创建自定义的 textSelect 事件，我们可以开拓增强交互性和提供更丰富用户体验的可能性。无论是高亮显示所选文本、触发操作还是收集见解,textSelect 事件都可能成为 Web 开发者工具箱中的一个有价值的补充。编码愉快！

如果您喜欢这篇微信，请分享给其他可能觉得有用的人。如果你在微信观看可以点在看支持一下。您也可以继续关注梦兽编程微信公众号，了解更多关于 JavaScript、React、Next.js、MongoDB、Rust、Golang 和 Web 开发的内容。

本文使用 markdown.com.cn 排版

原文链接：https://juejin.cn/post/7355677638882000931 作者：傻梦兽