手记

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

一、为元素绑定多个事件

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

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>

原文出处

0人推荐
随时随地看视频
慕课网APP