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

为了以️跨浏览器方式处理事件，我们可以使用一些可以隔离浏览器差异的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); 

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