JavaScript中 --- 绑定多事件问题浏览器兼容性解决方法。

最新推荐文章于 2023-03-24 10:18:21 发布

阿清呀.

最新推荐文章于 2023-03-24 10:18:21 发布

阅读量293

点赞数

分类专栏： javascript学习路程文章标签： javascript

本文链接：https://blog.csdn.net/wzg0817/article/details/105727089

版权

javascript学习路程专栏收录该内容

48 篇文章 0 订阅

订阅专栏

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

addEventListener（） —IE8及以下不支持

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

attachEvent()

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

但是这样就出现了浏览器不兼容的问题，我们可以自己定义一个方法来解决该问题。

<!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>