js自定义事件

最新推荐文章于 2025-01-20 10:15:00 发布

jyb123

最新推荐文章于 2025-01-20 10:15:00 发布

阅读量3.7k

点赞数 1

本文链接：https://blog.youkuaiyun.com/jyb123/article/details/86574365

版权

本文介绍了JavaScript中创建自定义事件的三种方式：构造函数、CustomEvent接口和document.createEvent方法。这些方法用于满足特定需求，如模块间通信。尽管document.createEvent已不推荐使用，但大部分浏览器仍支持。文中提供了详细的示例和注意事项，如事件的冒泡、取消及数据传递等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

除了浏览器提供的原生事件外，有时为了满足特定的需求，比如小模块之间的通信，传递信息等，需要自定义一些事件，JavaScript提供以下几种自定义事件的方式：

　Event() 构造函数, 创建一个新的事件对象 Event
　CustomEvent() 创建一个自定义事件（支持在web worker中使用）；
　document.createEvent() 创建一个新的事件（Event），随之必须调用自身的 init 方法进行初始化。

`Event`

event = new Event(typeArg, eventInit);

typeArg

是DOMString 类型，表示所创建事件的名称。

eventInit可选

是 EventInit 类型的字典，接受以下字段:

"bubbles"，可选，Boolean类型，默认值为 false，表示该事件是否冒泡。
"cancelable"，可选，Boolean类型，默认值为 false，表示该事件能否被取消。
"composed"，可选，Boolean类型，默认值为 false，指示事件是否会在影子DOM根节点之外触发侦听器。

注意：ie尚为实现。

示例：

// 创建一个支持冒泡且不能被取消的look事件

var ev = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(ev);

// 事件可以在任何元素触发，不仅仅是document
myDiv.dispatchEvent(ev);

`CustomEvent`

CustomEvent(
DOMString type,
optional CustomEventInit eventInitDict
)

type 事件的类型名称.

CustomEventInit eventInitDict 一个对象,提供了事件的配置信息.

bubbles：一个布尔值,表明该事件是否会冒泡.

cancelable：一个布尔值,表明该事件是否可以被取消.

detail：当事件初始化时传递的数据.

示例：

// 添加一个适当的事件监听器
obj.addEventListener("cat", function(e) { process(e.detail) })

// 创建并分发事件
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
obj.dispatchEvent(event)

document.createEvent

var event = document.createEvent(type);
event 就是被创建的 Event 对象.
type 是一个字符串，表示要创建的事件类型。事件类型可能包括"UIEvents", "MouseEvents", "MutationEvents", 或者 "HTMLEvents"。请查看 Notes 章节获取详细信息。

这种方式已经被官方声明不推荐使用了。但是浏览器都是支持的，IE也都支持 .

示例：

// 创建事件
var event = document.createEvent('Event');

// 定义事件名为'build'.
event.initEvent('build', true, true);

// 监听事件
elem.addEventListener('build', function (e) {
  // e.target matches elem
}, false);

// 触发对象可以是任何元素或其他事件目标
elem.dispatchEvent(event);

内容和示例来源于MDN。