1.创建方法
let myEvent = new Event('event_name')
但是为了传递数据,就需要使用CustomEvent构造器:
let myEvent = new CustomEvent('event_name',{
detail:{
name:'唐顿庄园' //需要将数据写在detail中,以便在addEventListener中获取
}
})
2.添加事件监听
target.addEventListener('event_name',fn)
3.事件触发
对于内置事件,利用鼠标滚轮去放大缩小页面对应的WheelEvent的resize事件,然而,自定义事件由于不是JS内置事件,需要在代码中显示触发它--使用dispatchEvent
4.实际使用
有一个数组,当每次添加新元素我们就打印它
let arr = []
function add(element){
document.dispatchEvent(
new CustomEvent('noAdd',{
detail
})
)
}
document.addEventListener('onAdd',(e)=>{
e.detail ? arr.push(e.detail) : null
console.log(arr)
})
//触发事件
add()
add('唐顿庄园')