(共556篇)
全部分类

模拟触发事件
[ JS基础 ] 

模拟触发事件

给元素添加的监听事件,可能是由用户的某项操作触发,也可以使用 JS 模拟触发:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<style>
    div {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        background-color: aquamarine;
    }
</style>
<div></div>
<script>
    var div = document.querySelector("div");
    div.addEventListener("click", function() {
        console.log("div元素被点击了");
    });

    setTimeout(function() {
        var event = new Event("click");
        div.dispatchEvent(event);
    }, 2000);
</script>

案例源码

在这个案例中,Event是一个构造函数,通过new Event()可以创建一个事件对象,任何元素都可以通过dispatchEvent()函数来模拟触发该事件。

new Event(type [,option])构造函数中,type参数表示要触发的事件名称,option是一个对象,用来设置模拟触发事件的配置项。

option 属性 作用
bubbles 设置该事件是否冒泡,默认是false ,表示事件默认不冒泡
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
    div {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        background-color: aquamarine;
    }
</style>
<div></div>
<script>
    var div = document.querySelector("div");
    div.addEventListener("click", function() {
        console.log("div元素被点击了");
    });
    document.body.addEventListener("click", function() {
        console.log("body元素被点击了");
    });

    setTimeout(function() {
        var event = new Event("click");
        div.dispatchEvent(event);
    }, 2000);

    setTimeout(function() {
        var event = new Event("click", {
            bubbles: true,
        });
        div.dispatchEvent(event);
    }, 4000);
</script>

案例源码