如何实现JS主动触发事件

前言

怎么说呢，竟然不知道有这个玩意。当发现可以通过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);
});