跨浏览器的事件处理程序

事件处理程序有DOM0级事件处理程序、DOM2级事件处理程序,IE事件处理程序,DOM0级事件处理程序具有简单,跨浏览器的优势。DOM2级事件定义了两个方法:addEventListener()和removeEventListener()这两个方法用于指定和删除事件处理程序,IE也有两个方法:attachEvent()和detachEvent(),由于IE8和更早的版本只支持事件冒泡,所以通过这两个方法只能添加到冒泡阶段,为了使事件处理程序可以在大多数浏览器正常的运行,只要关注冒泡阶段即可。所以我们要写一个方法,让它根据情况使用DOM0级方法,DOM2级方法或者IE方法添加事件:

function addEvent(e,type,handler){
        if(e.addEventListener){
            e.addEventListener(type,handler,false);
        }else if(e.attachEvent){
            e.attachEvent("on"+type,handler);
        }else{
            e["on"+type]=handler;
        }
    }

可以这样使用:
addEvent(btn,'’click',handler);

与addEvent()对应的移除事件的方法是removeEvent(),无论该事件用什么方法添加到元素中,如果其他方法无效,就采用DOM0级的方法移除。

function removeEvent(e,type,handler){
           if(e.removeEventListener){
               e.removeEventListener(type,handler,false);
           }else if(e.detachEvent){
               e.detachEvent("on"+type,handler);
           }else {
               e["on"+type]=null;
           }
    }

这两个方法首先都判断是否存在DOM2级的方法,如果存在就使用该方法传入事件类型,事件处理程序,和第三个参数false(因为关注冒泡阶段),如果存在IE方法就用第二种,以此类推,但是以上两种方法没有考虑到IE浏览器作用域的问题,其实这个我也不是很理解,参考老师的课件,添加的时候:

function addEvent(node, type, handler) {
    if (!node) return false;
    if (node.addEventListener) {
        node.addEventListener(type, handler, false);
        return true;
    }
    else if (node.attachEvent) {
        node['e' + type + handler] = handler;
        node[type + handler] = function() {
            node['e' + type + handler](window.event);
        };
        node.attachEvent('on' + type, node[type + handler]);
        return true;
    }
    return false;
}

移除事件时:

function removeEvent(node, type, handler) {
    if (!node) return false;
    if (node.removeEventListener) {
        node.removeEventListener(type, handler, false);
        return true;
    }
    else if (node.detachEvent) {
        node.detachEvent('on' + type, node[type + handler]);
        node[type + handler] = null;
    }
    return false;
}

不是很明白window.event。

你可能感兴趣的:(跨浏览器的事件处理程序)