javascript高级程序设计---事件类eventUntil

var eventUntil = {
/**
* 兼容IE和其他浏览器的事件添加方法，
* @param {[object]} element [元素对象]
* @param {[string]} type    [事件类型 click等]
* @param {[function]} handler [操作函数]
*/
addHandler: function(element, type, handler) {
// 标准方法
if (element.addEventListener) {
// false表示冒泡
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, handler);
} else {
// Dom0级事件
element['on' + type] = handler;
}
},
removeHandler: function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler);
} else if (element.detachEvent) {
element.detachEvent('on' + type, handler);
} else {
// Dom0级移除事件
element['on' + type] == null;
}
},
// 获取事件IE和w3c的不同
getEvent: function(event) {
return event ? event : window.event;
},
// 事件的目标,就是指点在哪里
getTarget: function(event) {
return event.target || event.srcElement;
},
preventDefault: function(event) {
if (event.preventDefault) {
// 阻止默认行为
event.preventDefault();
} else {
// IE阻止默认行为
event.returnValue = false;
}
},
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
// IE取消冒泡
event.cancelBubble = true;
}
},
// 已经兼容了IE8和以下浏览器
getPageX: function(event) {
var pagex = 0;

if (event.pageX === undefined) {
pagex = event.clientX +
(document.documentElement.scrollLeft || document.body.scrollLeft);

} else {
pagex = event.pageX;
}
return pagex;

},
getPageY: function(event) {
var pagey = 0;
if (event.pageY === undefined) {
pagey = event.clientY +
(document.documentElement.scrollTop || document.body.scrollTop);
} else {
pagey = event.pageY;
}
return pagey;
},
getRelatedTarget: function(event) {
if (event.relatedTarget) {
return event.relatedTarget;
} else if (event.toElement) {
return event.toElement;
} else if (event.fromElement) {
return event.fromElement;
} else {
return null;
}
},
getButton: function(event) {
// IE和其他浏览器都有button属性
if (document.implementation.hasFeature('MouseEvent', '2.0')) {
// 0,1,2分别是左中右鼠标键
return event.button;
} else {
switch (event.button) {
/*合并操作*/
// IE中的
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;

}
}
},
getWheelDelta: function(event) {
// 向上滚蛋为+120，向下滚动为-120
if (event.wheelDelta) {
// IE和其他浏览器支持mousewheel事件
return (client.engine.opera && client.engine.opera < 9.5) ? -event.wheelDelta : event.wheelDelta;
} else {
// 火狐支持一个DOMMouseScroll事件
return -event.detail * 40;

4000
}
},
getCharCode: function(event) {
if (typeof event.charCode == 'number') {
return event.charCode;
} else {
return event.keyCode;
}
}
};

//实例

document.onclick = function(event) {
var e = eventUntil.getEvent(event);
alert(eventUntil.getPageX(event) + ' ' + eventUntil.getPageY(event));
}
var mouse = document.getElementById('mouseover');
eventUntil.addHandler(mouse, 'mouseover', function(event) {
var event = eventUntil.getEvent(event);
var related = eventUntil.getRelatedTarget(event);
alert(related);
});

eventUntil.addHandler(mouse, 'mouseout', function(event) {
var event = eventUntil.getEvent(event);
var related = eventUntil.getRelatedTarget(event);
alert(related);
});

eventUntil.addHandler(document, 'click', function(event) {
var event = eventUntil.getEvent(event);
var btnValue = eventUntil.getButton(event);
eventUntil.preventDefault(event);
switch (btnValue) {
case 0:
alert('左键');
break;
case 1:
alert('中键');
break;
case 2:
alert('右键');
break;
}
});
eventUntil.addHandler(document, 'mousewheel', function(event) {
var event = eventUntil.getEvent(event);
alert(event.wheelDelta);
});

eventUntil.addHandler(window, 'DOMMouseScroll', function(event) {
var event = eventUntil.getEvent(event);
var detail = eventUntil.getWheelDelta(event);
alert(detail);
});

eventUntil.addHandler(document.getElementById('keypress'), 'keypress', function(event) {
var event = eventUntil.getEvent(event);
var charcode = eventUntil.getCharCode(event);
alert(charcode);
});

eventUntil.addHandler(window, 'scroll', function(event) {
// 表示标准模式
if (document.compatMode == 'CSS1Compat') {
document.documentElement.scrollTop = '200';
} else {
alert(document.body.scrollLeft);
}

});