通常是用户与页面进行交互的时候触发事件，比如点击某个元素触发click事件，鼠标移入移出触发mouse相关事件等，但是有的时候我们在写代码的时候需要手动触发某个事件，这可以是浏览器自带的事件也可以是我们自定义的事件。
1.手动触发某个事件
使用 EventTarget.dispatchEvent()
语法：
dispatchEvent(event)
具体用法看下面的demo，后面会用到。
2.如何声明一个事件
注意这个事件可以是浏览器现有的，比如click，resize等，也可以是任意名称
方式一：new Event(type, options)
这种方式可以设置事件是否冒泡
image.png
方式二：new CustomEvent(type, options)
这种方式可以给事件带其他参数
image.png
方式三：createEvent + initEvent 注意：已经废弃!
注意：这种方式不再推荐，有的博客有提到这种方式。
image.png
image.png
// 创建事件
const event = document.createEvent("Event");
// 定义事件名称为 'build'。
event.initEvent("build", true, true);
// 监听事件。
elem.addEventListener(
"build",
(e) => {
// e.target 与元素匹配
},
false,
);
// 目标可以是任何元素或其他 EventTarget。
elem.dispatchEvent(event);
最后，完整demo代码：
若对你有帮助，请点个赞吧，若能打赏不胜感激，谢谢支持！
本文地址：https://www.jianshu.com/p/46bcee7e559e?v=1726299370541，转载请注明出处，谢谢。
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createEvent