前言
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