前端面试必备——跨浏览器的事件处理程序和事件对象

前言

JavaScript与HTML交互都是靠事件完成的，而且事件的考察也是笔试和面试的一个重点，所以在笔试或者面试时，都会让面试者编写一个事件，一般都较为简单，但是此时面试官考察的不止是你编写代码能力，更看重你是否能注意到兼容性问题，所以在你编写时候，最好自己手写具有跨浏览器功能的事件处理程序或事件对象，这样能让面试官觉得你考虑问题比较全面。

所以前面面试必备系列第二篇，带你来编写具有跨浏览器的事件处理程序和事件对象。

事件处理程序

var EventUtil = {
    addHandler:function(element,type,handler){
        if(element.addEventListener){//检测是否存在DOM2
            element.addEventListener(type,handler,false)
        }else if(element.attachEvent){//存在ie
            element.attachEvent('on'+type,handler)
        }else{//DOM0
            element['on'+type]=handelr;
        }
    },
    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;
        }
    }
}

使用方法：

var btn = document.getElementById('myBtn');
var handler = function(){
    console.log('hi')
}
EventUtil.addHandler(btn,'click',handler);

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

事件对象

var EventUtil={
    getEvent:function(event){//事件对象
        return event ? event:window.event
    },
    getTarget:function(evet){//事件目标
        return event.target || event.srcElement;
    },
    prventDefault:function(event){//取消事件默认行为
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue=false;
        }
    },
    stopPropagation:function(event){//取消事件进一步冒泡或捕获
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble=true;
        }
    }
}

使用方法，假设想返回事件目标：

btn.onclick=function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event)
}

转自：http://blog.csdn.net/owen1190/article/details/75598133#comments