这段代码是《Javascript高级程序设计》第九章所总结的,我修改了一些地方并且调试正确,并且已经在自己的项目中使用。
var oEventUtil = new Object();
oEventUtil.addEventHandler = function(oTarget,sEventType,fnHandler){//sEventType is a type without 'on'
if(oTarget.addEventListener){
oTarget.addEventListener(sEventType,fnHandler,false);
}else if(oTarget.attachEvent){
oTarget.attachEvent("on"+sEventType,fnHandler);
}else{
oTarget["on"+sEventType] = fnHandler;
}
}
oEventUtil.removeEventHandler = function(oTarget,sEventType,fnHandler){//sEventType is a type without 'on'
if(oTarget.removeEventListener){
oTarget.removeEventListener(sEventType,fnHandler,false);
}else if(oTarget.detachEvent){
oTarget.detachEvent("on"+sEventType,fnHandler);
}else{
oTarget["on"+sEventType] = null;
}
}
oEventUtil.formatEvent = function(oEvent){
if(isIE && isWin){
if(oEvent.type == 'keypress'){
oEvent.charCode = oEvent.keyCode;
oEvent.keyCode = 0;
}
if(oEvent.type == 'keydown' || oEvent.type == 'keyup'){
oEvent.charCode = 0;
}
oEvent.eventPhase = 2;
oEvent.isChar = (oEvent.charCode > 0);
oEvent.pageX = oEvent.clientX + document.body.scrollLeft - document.body.clientLeft;
oEvent.pageY = oEvent.clientY + document.body.scrollTop - document.body.clientTop;
if(oEvent.type == 'mouseout'){
oEvent.relatedTarget = oEvent.toElement;
}else if(oEvent.type == 'mouseover'){
oEvent.relatedTarget = oEvent.fromElement;
}
oEvent.preventDefault = function(){
oEvent.returnValue = false;
}
oEvent.stopPropagation = function(){
oEvent.cancelBubble = true;
};
oEvent.target = oEvent.srcElement;
oEvent.time = (new Date()).getTime();
}
return oEvent;
}
oEventUtil.getEvent = function(){
if(window.event)
return this.formatEvent(window.event);
else
return this.formatEvent(oEventUtil.getEvent.caller.arguments[0]);
}
这段代码由4个function组成:addEventHandler、removeEventHandler、formatEvent、getEvent。
addEventHandler是给指定对象的某种事件添加响应函数,其参数oTarget,sEventType,fnHandler分别为需要关联的对象、事件的类型、处理函数的指针。事件类型这个参数是String类型,比如对document的click事件添加处理函数,则这个事件类型参数应该为"click"(注意:不是"onclick")。
这种添加事件的方法可以为一个对象的一种事件添加多个处理函数,如果用以下方法,则只能添加一个处理函数。
function docClick(){ // };
removeEventHandler所传递的参数是一样的,目的是移除相应的处理函数。
formatEvent是用来格式化event对象的,因为ie和别的浏览器的事件对象很不一样,这里将ie的事件对象格式化为和DOM一样的对象。isIE和isWin这两个布尔值是利用了之前的一个判断浏览器和操作系统的js库,如果不想依赖那个库的话,可以添加如下代码到最前端:
var isWin = (navigator.platform == " Win32 " ) || (navigator.platform == " Windows " );
接下来的代码我改动了不少,首先对键盘事件进行格式化。不论在什么浏览器,键盘事件都分为keydown、keypress、keyup,keypress是键盘按下并且产生字符的事件。然后是处理鼠标事件,将fromElement和toElement都归结到relatedTarget来。然后是取消浏览器默认事件的方法(preventDefault),接下来是停止事件冒泡的方法(stopPropagation)。
getEvent是取得事件对象的方法,ie中可直接访问window.event对象获得。在其他浏览器中,这个对象是通过处理函数的参数隐蔽的传入的,这时可以通过访问getEvent的调用函数的参数来获得,所以就有了oEventUtil.getEvent.caller.arguments[0]这一句。
怎么使用这个js库呢?很简单,看了如下例子就明白了!
function docKeyDown(){
var oEvent = oEventUtil.getEvent();
alert( ' eventType: ' + oEvent.type);
}
首先通过统一的方法获得事件对象var oEvent = oEventUtil.getEvent();
然后就可以通过oEvent来访问各种事件属性了,在各种浏览器上都是通过一样的方法访问的哦!^_^