前端自定义事件的触发与监听
一、基本概念1.Event2.CustomEvent3.addEventLister4.addEventLister
二、代码实现1.触发原生事件（1）不传递参数（2）传递参数
2.触发自定义事件
一、基本概念
实现前端自定义事件的触发与监听主要有四个东西，他们分别是Event、CustomEvent、addEventLister、dispatchEvent
1.Event
event = new Event(eventNameStr, options);
eventNameStr：事件名称字符串 options：
bubbles, 可选, Boolean类型, 默认值为 false, 表示该事件是否冒泡cancelable, 可选, Boolean类型, 默认值为 false, 表示该事件能否被取消composed, 可选, Boolean类型, 默认值为 false, 指示事件是否会在影子DOM根节点之外触发侦听器
2.CustomEvent
CustomEvent是继承了Event，但是新增在options中新增了一个detail字段，可以在其中设置一些自定义数据
customEvent = new CustomEvent(eventNameStr, options);
eventNameStr：事件名称字符串 options：
bubbles, 可选, Boolean类型, 默认值为 false, 表示该事件是否冒泡cancelable, 可选, Boolean类型, 默认值为 false, 表示该事件能否被取消composed, 可选, Boolean类型, 默认值为 false, 指示事件是否会在影子detail, 可选的默认值是 null 的任意类型数据，是一个与 event 相关可自定义的值
3.addEventLister
这个我们应该比较熟悉，经常在监听dom的一些事件中使用
dom.addEventListener(eventNameStr, callback)
window.addEventListener(eventNameStr, callback)
eventNameStr：监听的事件名称字符串 callback：监听到事件触发的回调函数
4.addEventLister
这个我们应该比较熟悉，经常在监听dom的一些事件中使用
dom.dispatchEvent(event)
window.dispatchEvent(event)
event：触发的事件对象（由1或者2得到）
二、代码实现
1.触发原生事件
（1）不传递参数
let divBox = document.getElementById('box')
function divClick(e) {
console.log('divClick');
console.log(e);
}
function clickTestEvent() {
const event = new Event('click') // 初始化事件
divBox.dispatchEvent(event) // 触发事件
}
点击按钮之后即可触发div的click事件
（2）传递参数
传递参数推荐使用CustomEvent，因为它提供了options.detail参数供我们自定义
let divBox = document.getElementById('box')
function divClick(e) {
console.log('divClick');
console.log(e);
}
function clickTestCustomEvent() {
const customerEvent = new CustomEvent('click', {detail: {name: 222}}) // 初始化CustomEvent事件，并在detail中设置自定义参数
divBox.dispatchEvent(customerEvent)
}
点击之后可以在detail字段中去除自定义的数据 其实使用Event也可以实现参数传递
let divBox = document.getElementById('box')
function divClick(e) {
console.log('divClick');
console.log(e);
}
function clickTestEvent() {
const event = new Event('click') // 初始化事件
event.data = { // 给event添加自定义属性来传递参数，但自定义属性时不要把原生属性覆盖
age: 111
}
divBox.dispatchEvent(event) // 触发事件
}
2.触发自定义事件
我们可以用这种方式触发一些自定义事件
let divBox = document.getElementById('box')
function clickTestEvent() {
const event = new Event('eventTest') // 初始化自定义事件 'eventTest'
divBox.dispatchEvent(event)
}
function eventTest(e) {
// 监听自定义事件 'eventTest' 的回调
console.log(e);
}
divBox.addEventListener('eventTest', eventTest) // 监听自定义事件 'eventTest'
点击即可触发自定义事件 ‘eventTest’。传参等操作与触发原生事件相同。