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

前言

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)}

---

欢迎订阅掘金专栏和知乎专栏