JS自定义事件及使用

435 阅读1分钟

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('唐顿庄园')