(共556篇)
全部分类

单个事件添加多个侦听函数
[ JS基础 ] 

一个事件添加多个侦听函数

前面讲的添加事件方式,都只能给元素的同一个监听事件添加一个侦听函数,就可能导致先添加的侦听函数被后添加的侦听函数覆盖,比如:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div onclick="add()">element</div>
<script>
    var div = document.querySelector("div");
    div.onclick = function add() {
        console.log("1");
    };
    div.onclick = function add() {
        console.log("2");
    };
    // 只有 3 被打印出来
    div.onclick = function add() {
        console.log("3");
    };
</script>

`element.addEventListener(type, fn [,usecapture])

`element.addEventListener(type, fn [,usecapture])方法可以给监听对象添加多个侦听函数

参数 作用
type 监听事件名称
fn 监听事件触发的函数
usecapture 设置侦听函数的执行方式

给同一个监听事件添加多个侦听函数可以这么写:

 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;
        background-color: aqua;
    }
</style>
<div></div>
<script>
    var div = document.querySelector("div");
    div.addEventListener("click", function() {
        console.log("event1");
    });
    div.addEventListener("click", function() {
        console.log("event2");
    });
    div.addEventListener("click", function() {
        console.log("event3");
    });
</script>

案例源码

从控制台中可以看出,给 div 元素添加的点击事件,会按照添加的顺序依次执行,后添加的不会覆盖先添加的侦听函数。