一、API
- document.createEvent("HTMLEvents").initEvent("名称", true, true);
- window.addEventListener
- window.dispatchEvent
二、主流浏览器 流程五步：
// 1.创建一个event对象实例
var event = document.createEvent("HTMLEvents");
// 2.初始化一个aaa事件， 3个参数：事件类型，是否冒泡，是否阻止浏览器的默认行为
event.initEvent("aaa", true, true);
// 3.传递的属性或数据，可以随便自己定义
event.name = 'hello, 我是小礼';
event.message = '我今年18岁';
// 4.触发自定义事件aaa
window.dispatchEvent(event);
// 5.监听
window.addEventListener('aaa', function (event) {
console.log(event.name+'，'+event.message);
}, false);
//控制台就可以打印出监听的结果： hello, 我是小礼，我今年18岁三、非IE主流浏览器及IE下的事件触发器
//document.creatEventObject()是IE创建event对象实例的方法，
//和document.creatEvent('HTMLEvents')在非IE主流浏览器下的作用相同，
//fireEvent是IE下的事件触发器，与dispatchEvent在非IE主流浏览器下作用相同
原文链接：https://blog.csdn.net/weixin_42333548/article/details/103367725
var fireEvent = function(element,event){
if (document.createEventObject) {
// IE浏览器支持fireEvent方法
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
} else {
// 其他标准浏览器使用dispatchEvent方法
var evt = document.createEvent( 'HTMLEvents' );
evt.initEvent(event, true, true);
return !element.dispatchEvent(evt);
}
};四、快速实现：使用自定义事件对象 CustomEvent
// 1.定义初始化事件
var event = new CustomEvent("camera-error", { error: error });
// 2.触发事件
window.dispatchEvent(event);
// 原始定义
declare var CustomEvent: {
prototype: CustomEvent;
new<T>(type: string, eventInitDict?: CustomEventInit<T>): CustomEvent<T>;
};或者
// 1.触发事件
window.dispatchEvent(
// 2.注册初始化事件
//传入参数：事件名称必须、是否冒泡、是否阻止默认事件、传递的数据
//type: string, bubbles?: boolean, cancelable?: boolean, detail?: T
new CustomEvent("arjs-video-loaded", {
detail: {
component: document.querySelector("#arjs-video"),
},
})
);
//3.监听
window.addEventListener('arjs-nft-loaded', function (ev) {
console.log(ev);
})
// CustomEvent原始定义
interface CustomEvent<T = any> extends Event {
readonly detail: T;
initCustomEvent(type: string, bubbles?: boolean, cancelable?: boolean, detail?: T): void;
}
