JavaScript事件: 原生事件 VS. 自定义事件

2023-12-05 00:32:55

在 JavaScript 中，事件是发生在 HTML 文档中的动作。当用户与网页交互时，例如点击按钮或移动鼠标，就会触发事件。JavaScript 提供了许多内置的事件类型，称为原生事件，比如点击事件、鼠标移动事件、键盘抬起事件等等。这些事件类型由浏览器定义，可以被用来对用户的交互做出响应。

自定义事件与原生事件不同，它不是浏览器内置的，而是由开发人员自己定义的。自定义事件的用途非常广泛，可以用来实现各种各样的功能，比如创建自己的UI组件、构建拖放功能、或者在不同的组件之间进行通信。

创建自定义事件非常简单，只需要使用 document.createEvent() 方法即可。该方法接受一个参数，指定自定义事件的类型。例如，我们可以创建一个名为 myCustomEvent 的自定义事件：

const myCustomEvent = document.createEvent('CustomEvent');

创建自定义事件后，可以使用 initCustomEvent() 方法来初始化它。该方法接受四个参数：

例如，我们可以将 myCustomEvent 初始化为一个可冒泡、可取消的自定义事件，并附带一些详细信息：

myCustomEvent.initCustomEvent('myCustomEvent', true, true, {
  message: 'Hello, world!'
});

初始化自定义事件后，可以使用 dispatchEvent() 方法来触发它。该方法接受一个参数，即要触发的自定义事件。例如，我们可以使用以下代码来触发 myCustomEvent：

document.dispatchEvent(myCustomEvent);

自定义事件在 JavaScript 中有着广泛的应用，下面是一些常见的场景：

创建自己的UI组件： 我们可以使用自定义事件来创建自己的UI组件，例如按钮、文本框和下拉菜单。自定义事件可以用来处理这些组件的交互，例如点击、输入和选择。
构建拖放功能： 我们可以使用自定义事件来构建拖放功能。当用户拖动元素时，我们可以触发一个自定义事件，并在事件处理程序中实现拖放逻辑。
在不同的组件之间进行通信： 我们可以使用自定义事件在不同的组件之间进行通信。例如，我们可以创建一个组件来管理表单验证，并在验证成功时触发一个自定义事件。其他组件可以监听这个自定义事件，并在收到事件后更新UI。