009天之跨浏览器的事件处理程序

Posted 2021-03-04 bbqq1314

为了以?跨浏览器方式处理事件，我们可以使用一些可以隔离浏览器差异的js库。由于业务需求，有时候我们需要写一些我们自己封装一些兼容代码。

比如创建一个addHandler(),它的职责是视情况分别使用DOM0级方法，DOM2级方法或IE方法来添加事件。然后addHandler()方法接受三个参数：要操作的元素，事件名称，和事件处理程序函数。

与addHandler();对应的方法是removeHandler（），它也接受同样的参数，这个的职责是移除之前添加的事件处理程序。无论这个事件是采取什么方式添加到元素中，如果其他方法无效，默认采取DOM0级方法。

let EventUtil = {
    addHandler: function(element, type, handler) {
        if(element.addEventListener) {
            element.addEventListener(type, handler, false)
        } else if(element.attachEvent) {
            element.attchEvent("on" + type, handler)
        } else {
            element["on" + type] = handler
        }
    },
    removeHandler: function(element, type, handler) {
        if(element.removeEventListener) {
            element.removeEventListener(type,handler,false)
        } else if(element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    }
}



//调用时候

let btn = document.getElementById(‘myBtn‘);

let handler = function() {
    console.log("你的代码改变世界!")
}

EventUtil.addHandler(btn, "click",handler);

//其他代码

EventUtil.removeHandler(btn,‘click‘,handler);

扫码加群，每日更新一篇前端技术文章一起成长。