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

  • 现实情景: 在对博客园的样式进行修改时, 发现需要对博客园本身的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方法调用这个自定义事件来达到主动触发的目的
posted @   Syinho  阅读(243)  评论(0编辑  收藏  举报
编辑推荐:
· 使用 .NET Core 实现一个自定义日志记录器
· [杂谈]如何选择:Session 还是 JWT?
· 硬盘空间消失之谜:Linux 服务器存储排查与优化全过程
· JavaScript是按顺序执行的吗?聊聊JavaScript中的变量提升
· [杂谈]后台日志该怎么打印
阅读排行:
· 2000 Star,是时候为我的开源项目更新下功能了
· 面试官:DNS解析都整不明白,敢说你懂网络?我:嘤嘤嘤!
· [WPF UI] 为 AvalonDock 制作一套 Fluent UI 主题
· 基于.NET WinForm开发的一款硬件及协议通讯工具
· 内网穿透之http代理服务器
历史上的今天:
2019-08-23 (转)javascript中为何在匿名function函数后面还外加一个括号
点击右上角即可分享
微信分享提示