专栏首页从零开始学 Web 前端从零开始学 Web 之 DOM(六)为元素绑定与解绑事件

从零开始学 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 条评论
登录 后参与评论

相关文章

  • 从零开始学 Web 之 DOM(七)事件冒泡

    事件冒泡:当有多个元素嵌套,并且这些元素绑定了相同的事件,这时候如果里面的元素事件触发了,那么外面的事件会自动触发。

    Daotin
  • 从零开始学 Web 之 jQuery(五)操作元素其他属性,为元素绑定事件

    如果我们在设置为原来宽高2倍的时候,就要先把获取的宽高转换成数字类型,再乘以2,这样操作比较麻烦,有没有简单的方法呢?

    Daotin
  • jQuery ui中sortable draggable droppable的使用

    最近工作中用到了jQuery UI中排序和拖拽功能,花了大概一天的时间,搞清楚了大概的参数配置,以及遇到的一些问题,总结如下。

    Daotin
  • python函数和类

    曾经有一句非常出名的话是 In Unix Everything Is A File,在unix中所有的一切都是文件

    py3study
  • [Java面试九]脚本语言知识总结.

    一枝花算不算浪漫
  • python3-抛出、捕获异常

    py3study
  • Python 工匠:容器的门道

    https://www.zlovezl.cn/articles/mastering-container-types/

    用户2196567
  • python基础知识3(列表和元组)

    列表是打了激素的数组,数组只能存储同种类型的数据,而列表像一个仓库,存储不同类型的数据.

    py3study
  • 病毒分析 | 一只“蜗牛”偷梁换柱,靠锁主页进行牟利

    一、概述 众所周知,导航推广、淘宝客劫持可以给渠道商带来巨大的利益,使得木马病毒制造者纷纷变成推广渠道商。一些聪明的病毒制造者利用锁页生成器,以“造福”推广技术...

    FB客服
  • 线下牛人分享续

    昨天本号的文章末尾附带了一个线下活动“IGeek第四期北京站”的分享嘉宾的PPT文档连接,很多同行朋友反馈说很受用,而且希望能分享出更多的牛人分享的内容。我从朋...

    后端技术探索

扫码关注云+社区

领取腾讯云代金券