为一个元素绑定多事件有两种方法：addEventListener（）和 attachEvent()

addEventListener（） —IE8及以下不支持

  • 通过这个方法也可以为元素绑定响应函数
  • 参数：
      1.事件的字符串，不要on
      2.回调函数，当事件触发时该函数会被调用
      3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
  • 使用addEventListener () 可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。

attachEvent()

  • 在IE8中可以使用attachEvent()来绑定事件
  • 参数：
      1.事件的字符串，要on。
      2.回调函数。
  • 这个方法也可以同时为一个事件绑定多个处理函数。
    不同的是它是后绑定的先执行，执行顺序和addEventListener()相反。br

  但是这样就出现了浏览器不兼容的问题，我们可以自己定义一个方法来解决该问题。 
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function() {
            var btn = document.getElementById("btn");
            // btn.onclick = function() {
            //     alert("1");
            // };
            // btn.onclick = function() {
            //     alert("2");
            // };

            // btn.addEventListener("click", function() {
            //     alert("1");
            // }, false);
            // btn.addEventListener("click", function() {
            //     alert("2");
            // }, false);


            // btn.attachEvent("onclick", function() {
            //     alert("1");
            // });
            // btn.attachEvent("onclick", function() {
            //     alert("2");
            // });

            // btn.addEventListener("click", function () {
            //     alert(this);
            // }, false);
            // btn.attachEvent("onclick", function() {
            //     alert(this);
            // });

            // 测试this是指向的谁
            // bing(btn, "click", function() {
            //     alert(this);
            // });

            bing(btn, "click", function() {
                alert("1");
            });
            bing(btn, "click", function() {
                alert("2");
            });

        };

        // 我们可以自己定义一个函数，来兼容这个问题：
        //     addEventListener()中的this，是绑定事件的对象。
        //     attachEvent()    中的this，是window。

        // 参数：
        //       obj       绑定的事件对象
        //       eventStr  事件的字符串(不要on)
        //       callback  回调函数

        function bing(obj, eventStr, callback) {
            if (obj.addEventListener) {
                obj.addEventListener(eventStr, callback, false)
            } else {
            	// 创建一个匿名函数来调用callback，去指定this指向的元素
                obj.attachEvent("on" + eventStr, function() {
                    callback.call(obj);
                });
            }

        };
    </script>
</head>

<body>
    <button id="btn">点击</button>

</body>

</html>


愿你的坚持终有收获。