模拟触发事件
给元素添加的监听事件，可能是由用户的某项操作触发，也可以使用 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>
|
案例源码
