把javascript event事件封装了下，兼容大多数浏览器
代码如下
var $ = {};
$.addEvent = function(element, eventType, handler){
var self = this;
var i = self._find(element, eventType, handler);
if(i != -1){
return;
}
function wrappedHandler(e){
e = window.event || e;
var event = self._formatEvent(e);
event._event = e;
handler.call(element, event);
}
if (element.addEventListener) {
element.addEventListener(eventType, wrappedHandler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + eventType, wrappedHandler);
} else {
element["on" + eventType] = wrappedHandler;
}
var h = {
element : element,
eventType : eventType,
handler : handler,
wrappedHandler : wrappedHandler
},
d = self._getDoc(element),
w = d.parentWindow || window,
id = self._uuid();
self._window = w;
if(!w._allHandlers){
w._allHandlers = {};
}
w._allHandlers[id] = h;
if(!element._handlers){
element._handlers = [];
}
element._handlers.push(id);
if(!w._onunloadHandlerRegistered){
w._onunloadHandlerRegistered = true;
if(w.attachEvent){
w.attachEvent("onunload", self._removeAllHandlers);
}
}
};
$.removeEvent = function(element, eventType, handler){
var self = this;
var i = self._find(element, eventType, handler);
if(i == -1){
return;
}
var d = self._getDoc(element),
w = d.parentWindow || window,
handlerId = element._handlers[i],
h = w._allHandlers[handlerId];
self._window = w;
if(element.removeEventListener) {
element.removeEventListener(eventType, h.wrappedHandler, false);
}else if(element.detachEvent) {
element.detachEvent("on" + eventType, h.wrappedHandler);
}else{
element["on" + eventType] = null;
}
element._handlers.splice(i, 1);
delete w._allHandlers[handlerId];
};
$.fireEvent = function(element, eventType){
var self = this;
if (document.dispatchEvent) {
var evt = null,
doc = self._getDoc(element);
if (/mouse|click/i.test(eventType)) {
evt = doc.createEvent('MouseEvents');
evt.initMouseEvent(eventType, true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
} else {
evt = doc.createEvent('Events');
evt.initEvent(eventType, true, true, doc.defaultView);
}
element.dispatchEvent(evt);
}else{
element.fireEvent('on' + eventType);
}
};
$.hover = function(element, overHandler, outHandler){
var self = this;
self.addEvent(element, "mouseover", overHandler);
self.addEvent(element, "mouseout", outHandler);
};
$._find = function(element, eventType, handler){
var handlers = element._handlers,
self = this;
if(!handlers){
return -1;
}
var d = self._getDoc(element),
w = d.parentWindow || window;
for(var i = handlers.length - 1; i >= 0; i--){
var handlerId = handlers[i],
h = w._allHandlers[handlerId];
if(h.eventType == eventType && h.handler == handler){
return i;
}
}
return -1;
};
$._formatEvent = function (oEvent) {
if (typeof oEvent.charCode == "undefined") {
oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
oEvent.isChar = (oEvent.charCode > 0);
}
if (oEvent.srcElement && !oEvent.target) {
oEvent.eventPhase = 2;
oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
oEvent.pageY = oEvent.clientY + document.body.scrollTop;
if (!oEvent.preventDefault) {
oEvent.preventDefault = function () {
this.returnValue = false;
};
}
if (oEvent.type == "mouseout") {
oEvent.relatedTarget = oEvent.toElement;
} else if (oEvent.type == "mouseover") {
oEvent.relatedTarget = oEvent.fromElement;
}
if (!oEvent.stopPropagation) {
oEvent.stopPropagation = function () {
this.cancelBubble = true;
};
}
oEvent.target = oEvent.srcElement;
oEvent.time = (new Date).getTime();
}
return oEvent;
};
$._removeAllHandlers = function(){
var self = this,
w = self._window || window;
for(var id in w._allHandlers){
var h = w._allHandlers[id];
if(h.element.detachEvent){
h.element.detachEvent("on" + h.eventType, h.wrappedHandler);
}
delete w._allHandlers[id];
}
}
$._getDoc = function(element){
return element.ownerDocument || element.document || ((element.defaultView || element.window) && element) || document;
};
$._uuid = function(){
var _counter = 0;
return function(){
return "h" + _counter++;
}
};
function run(e){
alert(e.pageX);
}
var edit = document.getElementById("edit");
var del = document.getElementById("del");
var fire = document.getElementById("fire");
$.addEvent(edit, "click", run);
$.addEvent(del, "click", function(e){
$.removeEvent(edit, "click", run);
});
$.addEvent(fire, "click", function(){
$.fireEvent(edit, "click");
});
$.hover(fire, function(e){
console.log(e.pageX);
}, function(e){
console.log(e.pageY);
});
PS：参考了JAVASCRIOT权威指南