前言
怎么说呢,竟然不知道有这个玩意。当发现可以通过JS来主动触发事件后,这直接打开了我的视野。原本一个不知道如何下手去解决的问题,突然就变得小菜一碟。
实现
有几种方式,这里都进行介绍一下。
eleme.click()
这是最简单的一种方式,获取到响应的dom元素,然后执行click
事件即可,如下图:
Document.createEvent()
createEvent 使用的许多方法,如 initCustomEvent,都被废弃了。请使用 event constructors 来替代。
因为有很多方法已经弃用了,这里就简单介绍一下,具体用法可以查看:Document.createEvent()
语法
var event = document.createEvent(type);
- event 是返回的事件对象
- type是事件类型
我们还是以鼠标事件为例,毕竟鼠标事件是最常用的。
onMounted(() => {
// 创建通用事件
const event = document.createEvent('Event');
// 初始化事件,参数1:事件名,参数2:是否可以冒泡,参数3:是否可以被阻止
event.initEvent('click', true, false);
// 监听事件
// elem.addEventListener('click', () => { });
// 每个1000触发一次
setInterval(() => {
document.getElementById('btn')?.dispatchEvent(event);
}, 1000);
});
使用Event构造函数自定义事件
onMounted(() => {
// 创建事件,也可以像vue那样自定义事件
const event = new Event('click');
setInterval(() => {
document.getElementById('btn')?.dispatchEvent(event);
}, 2000);
});