自定义事件 & createEvent

1、使用 createEvent 创建事件

下面 Event 事件说明

参数	事件接口	初始化方法
HTMLEvents	HTMLEvent	initEvent()
MouseEvents	MouseEvent	initMouseEvent()
UIEvents	UIEvent	initUIEvent()
MutationEvents	MutationEvent	initMutationEvent()

var elem = document.querySelector('#div');

// 1、创建事件
const event = document.createEvent("Event");

// 2、定义事件名称为 'build'
// initEvent(eventName, canBubble, preventDefault)
// 参数1：事件名称
// 参数2：是否可以冒泡
// 参数3：是否阻止事件的默认操作
// 参数4：可以接受 window.history.state
event.initEvent("build", true, true, state);

// 3、监听 'build' 事件
elem.addEventListener("build",(e) => {
    // e.target matches elem
});

// 4、触发事件
// 4.1 使用 dispatchEvent 触发事件
// 4.2 目标可以是任何 Element 或其他 EventTarget
elem.dispatchEvent(event);

2、使用 Event 创建事件

var elem = document.querySelector('#div');

// 创建事件
var event = new Event('myEvent');

// 监听事件
elem.addEventListener('myEvent', function (e) { 
    console.log(e) 
}, false); 

// 触发事件
elem.dispatchEvent(event);

3、使用 CustomEvent 创建事件

var elem = document.querySelector('#div');

// 1、创建事件
// 参数1：type 事件名称的字符串
// 参数2：除了在Event()中定义的属性外，还是自定义 detail 参数
var event = new CustomEvent("myEvent", {"detail":{"username":123}}); 


// 2、事件监听
elem.addEventListener("myEvent",(e) => {
    // e.target matches elem
});

3、事件触发
elem.dispatchEvent(event);