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

• 现实情景: 在对博客园的样式进行修改时, 需要对博客园的中某些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方法并没有被禁用

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

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方法调用这个自定义事件来达到主动触发的目的