解决浏览器事件绑定兼容性问题

这里主要是针对DOM2级事件,对于HTML事件和DOM0级事件在非IE和IE下都能得到支持,因此这里只实现对DOM2级事件的兼容性处理和封装

思路:

  1. 绑定事件:如果能使用addEventListener方法绑定的,就采用本方法;否则采用attachEvent方法
  2. 解绑事件:如果能采用addEventListener方法绑定的,就采用removeEventListener方法解绑;否则就采用detachEvent方法解绑

伪代码:

function addEvent(ele){
            if(如果为非IE){
                就执行addEventListener
            }else{
                执行attachEvent
            }
        }
addEvent();

下面就直接看代码吧

<div style="width: 200px;height: 200px;background-color: pink"></div>

        var div = document.querySelector('div');

        //采用封装,封装成一个对象
        //调用的时候直接 对象.key即可
        var superEvent = {
            // ele--哪个元素调用该事件
            // type--调用事件的类型(click、mousemove...)
            // func--函数


            // 添加事件
            add: function(ele, type, func) {
                //如果在非IE环境下
                if (ele.addEventListener) {
                    ele.addEventListener(type, func);
                } else { //在IE环境下
                    ele.attachEvent('on' + type, func);
                }
            },

            //移除事件
            remove: function(ele, type, func) {
                //如果在非IE环境下
                if (ele.removeEventListener) {
                    ele.removeEventListener(type, func);
                } else {
                    //在IE环境下
                    ele.detachEvent('on' + type, func);
                }
            }
        }

        function show() {
            console.log("这是一个div执行函数");
        }
        superEvent.add(div, 'click', show);
        // superEvent.remove(div, 'click', show);

非IE:

 

IE下:

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白小白从不日白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值