526互联

js_通过js主动触发原生事件, 以及通过js注册自定义事件并手动触发

发布时间 2023-08-23 17:08:06作者: Steperouge
  • 现实情景: 在对博客园的样式进行修改时, 发现需要对博客园本身的html结构进行更改, 而其中一些html结构被绑定了事件处理程序. 一些元素在修改时虽然被隐藏但是也需要通过其他方式来达到触发它原本绑定的事件处理程序的目的, 因此需要对这些DOM的绑定事件进行手动触发

主动触发原生事件, 以click为例

const oBtn2 = document.querySelector('#btn2')
oBtn2.addEventListener('click', () => {
  console.log('click')
})
const evObj = document.createEvent('MouseEvents')
evObj.initMouseEvent('click', true, true, window)
setTimeout(() => {
  oBtn2.dispatchEvent(evObj)
}, 2500)
  • 如上代码所示, 在id为btn2的元素上监听click事件, 再通过createEvent创建一个click事件, 并通过dispatchEvent来主动触发这个模拟事件
  • tip: 在MDN上提示createEvent事件的很多方法都被弃用了, 但是initMouseEvent方法并没有被禁用
  • tip: click原生事件还可以直接通过HTMLElement.click()方法来主动调用, 但是HtmlElement只有click, focus, blur三种事件可以被这样主动调用, 其它事件比如mouseenter需要如上操作

注册自定义事件并主动调用

const oBtn = document.querySelector('#btn')
const myEv = new CustomEvent('cat', {
  detail: {
    testInfo: '这是一条测试信息',
  },
  bubbles: true, // 布尔值, 表示是否可以冒泡
  cancelable: true, // 布尔值, 表示事件是否可以取消
})
// 2. 监听自定义事件并注册事件处理程序
oBtn.addEventListener('cat', e => {
  console.log(e.detail)
})
// 3. 手动触发自定义事件
setTimeout(() => {
  oBtn.dispatchEvent(myEv)
}, 1500)
  • 如上代码所示, 因为createEvent的initCustomEvent被弃用, 所以使用CustomEvent构造函数来创建一个名为cat的新的自定义事件对象. 元素监听这个事件后, 同样通过dispatchEvent方法调用这个自定义事件来达到主动触发的目的