如何构建一个JavaScript中的自定义事件？

本文共计2250个文字，预计阅读时间需要9分钟。

目录+ 如何创建自定义事件+ 事件定义+ 冒泡+ 可取消+ 组合+ 组合+ 给事件传递自定义数据+ 命名约定+ 双击事件+ 总结前言：相信大家一定处理过很多事件监听，比如点击事件、滚动事件等。下面我们将介绍一些事件处理的相关知识。

目录

• 怎么创建自定义事件
• 事件定制
• 冒泡 bubbles
• 可取消 cancelable
• 组合 composed
• 给事件传递自定义数据
• 命名约定
• 双击事件
• 总结

前言:

相信大家肯定处理过很多的事件监听，比如点击事件或者表单提交。事件监听对许多用例来说很有帮助，但是有时我们需要创建自己的自定义事件来处理复杂的交互。

怎么创建自定义事件

创建自定义事件听起来很困难，但是只需要下面简单的一行代码即可。

const myEvent = new Event("myCustomEvent")

我们可以通过事件构造函数创建一个新的 Event 对象。在最基本的形式中，你只需要将一个字符串传递给构造函数，这个字符串就是你定义的事件名称。为了监听这个事件，你可以将该事件监听器添加到你要监听的元素上，

如下：

document.addEventListener("myCustomEvent", e => { console.log(e) })

最后一步，你需要做的事，触发创建并正在监听的事件。