一、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?: Tnew 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;
}
