通常是用户与页面进行交互的时候触发事件，比如点击某个元素触发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代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
<div>
<button id="btn1">触发resize事件</button>
<button id="btn2">触发自定义"sayBingGan"事件</button>
</div>
<script>
{
const btn1 = document.getElementById("btn1");
btn1.addEventListener("click", () => {
// 触发resize事件
window.dispatchEvent(new Event("resize"));
});
// 监听resize事件
window.addEventListener("resize", () => {
console.log("resize event fired");
});
}
{
const btn1 = document.getElementById("btn2");
btn1.addEventListener("click", () => {
// 方式一：创建自定义事件 Event
// let myEvent = new Event("sayBingGan");
// 方式二：更高级方式创建自定义事件， Event + 参数
let myEvent = new CustomEvent("sayBingGan", {
// 自定义数据
detail: {
a: "参数1",
b: "参数2",
},
});
// 方式三：createEvent + event.initEvent(type, bubbles, cancelable) -- 已经弃用
// 警告：与 createEvent 一起使用的许多方法（例如 initCustomEvent）已被弃用。请使用 event 构造函数代替。
// 触发事件
window.dispatchEvent(myEvent);
});
// 监听事件
window.addEventListener("sayBingGan", (e) => {
console.log("sayBingGan event fired", "饼干", e);
});
}
</script>
</html>
若对你有帮助，请点个赞吧，若能打赏不胜感激，谢谢支持！
本文地址：https://www.jianshu.com/p/46bcee7e559e?v=1726299370541，转载请注明出处，谢谢。
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createEvent
网友评论