从零开始学 Web 之 DOM（六）为元素绑定与解绑事件

2021-07-31 23:34:44

大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新......
+------------------------------------------------------------
github：https://github.com/Daotin/Web
微信公众号：Web前端之巅
博客园：http://www.cnblogs.com/lvonve/
CSDN：https://blog.csdn.net/lvonve/
+-----------------------------------------------------------
在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、为元素绑定多个事件

前导：如果一个按钮绑定了多个点击事件，那么点击按钮的时候只会执行最后一个点击事件，前面的点击事件都被覆盖了。那么如何为一个按钮绑定多个相同的事件，并且每个事件都会执行呢？

1、为元素绑定多个事件

<body>
    <input type="button" value="按钮1" id="btn1">
    <input type="button" value="按钮2" id="btn2">
    <!-- <div id="dv"></div> -->

    <script src="common.js"></script>
    <script>
        // 参数有3个
        // 参数1：事件的类型（事件的名字），不要on
        // 参数2：事件处理函数（命名函数或者匿名函数）
        // 参数3：false

        // 兼容性：chrome，firefox支持，IE8不支持
        my$("btn1").addEventListener("click", function() {
            alert("1");
        },false)
        my$("btn1").addEventListener("click", function() {
            alert("2");
        },false)
        my$("btn1").addEventListener("click", function() {
            alert("3");
        },false)

        // 参数有2个
        // 参数1：事件的类型（事件的名字），要on
        // 参数2：事件处理函数（命名函数或者匿名函数）

        // 兼容性：chrome，firefox不支持，IE8支持
        my$("btn2").attachEvent("onclick", function() {
            alert("4");
        });
        my$("btn2").attachEvent("onclick", function() {
            alert("5");
        });
        my$("btn2").attachEvent("onclick", function() {
            alert("6");
        });
    </script>
</body>

绑定事件的方式：

addEventListener: chrome，firefox支持，IE8不支持

attachEvent: chrome，firefox不支持，IE8支持

2、绑定事件兼容代码

<body>
    <input type="button" value="按钮" id="btn">

    <script src="common.js"></script>
    <script>
        // 为任意元素添加任意事件
        function addAnyEventListener(element, type, func) {
            if(element.addEventListener) {
                element.addEventListener(type, func, false);
            } else if(element.attachEvent) {
                element.attachEvent("on"+type, func);
            } else {
                element["on"+type] = func;
            }
        }

        addAnyEventListener(my$("btn"), "click", function() {
            console.log("事件1");
        });
        addAnyEventListener(my$("btn"), "click", function() {
            console.log("事件2");
        });
        addAnyEventListener(my$("btn"), "click", function() {
            console.log("事件3");
        });
    </script>
</body>

my("dv").onclick == my$("dv")["onclick"]

3、绑定事件的区别

方法名不同；
参数个数不同，addEventListener有三个参数，attachEvent有两个参数；
addEventListener中事件的类型没有 on，attachEvent中事件的类型有on；
chrome,firefox 支持 addEventListener ，IE8不支持；

chrome,firefox 不支持 attachEvent ，IE8支持；

事件中的 this 不同，addEventListener 中的 this 是当前绑定的对象；

attachEvent 中的 this 是 window。

二、为元素解绑事件

1、三种方式

1.1、方式一

如果使用 元素.onclick = function(){}; 的方式绑定对象的话，解绑的方式为 元素.onclick = null;

1.2、方式二

如果使用 元素.addEventListener("click", f1, false); 的方式绑定对象的话，解绑方式为 元素.removeEventListener("click", f1, false);

注意：这里面不能使用匿名函数，因为需要同一个事件处理函数，而两个匿名函数是两个不同的函数，所以需要使用命名函数。

1.3、方式三

如果使用 元素.attachEvent("onclick", f1); 的方式绑定对象的话，解绑方式为 元素.detachEvent("onclick", f1);

2、解绑事件兼容代码

// 为任意元素绑定任意事件
function addAnyEventListener(element, type, func) {
    if(element.addEventListener) {
        element.addEventListener(type, func, false);
    } else if(element.attachEvent) {
        element.attachEvent("on"+type, func);
    } else {
        element["on"+type] = func;
    }
}

// 为任意元素解绑任意事件
function removeAnyEventListener(element, type, funcName) {
    if(element.removeEventListener) {
        element.removeEventListener(type, funcName, false);
    } else if(element.detachEvent) {
        element.detachEvent("on"+type, funcName);
    } else {
        element["on"+type] = null;
    }
}

示例：

<body>
    <input type="button" value="按钮" id="btn1">
    <input type="button" value="按钮" id="btn2">

    <script src="common.js"></script>
    <script>
        function f1() {
            console.log("第一个");
        }
        function f2() {
            console.log("第二个");
        }
        addAnyEventListener(my$("btn1"), "click", f1);
        addAnyEventListener(my$("btn1"), "click", f2);

        my$("btn2").onclick = function () {
            removeAnyEventListener(my$("btn1"), "click", f1);
        }
        
    </script>
</body>

码农公寓