兼容所有浏览器事件注册

//EventUtil 的用法如下所示。
var EventUtil = {

 addHandler: function(element, type, handler){
 if (element.addEventListener){
 element.addEventListener(type, handler, false);
 } else if (element.attachEvent){
 element.attachEvent("on" + type, handler);
 } else {
 element["on" + type] = handler;
 }
 },
 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(){
 alert("Clicked");
};
EventUtil.addHandler(btn, "click", handler);
//这里省略了其他代码
EventUtil.removeHandler(btn, "click", handler); 

 EventUtil增强

var EventUtil = {

 addHandler: function(element, type, handler){
 //省略的代码
 },
 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 {
 event.returnValue = false;
 }
 },

 removeHandler: function(element, type, handler){
 //省略的代码
 },
 stopPropagation: function(event){ 
if (event.stopPropagation){
 event.stopPropagation();
 } else {
 event.cancelBubble = true;
 }
 }
};

 Demo

var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function(event){
 event = EventUtil.getEvent(event);
 var target = EventUtil.getTarget(event);
 switch(target.id){
 case "doSomething":
 document.title = "I changed the document's title";
 break;
 case "goSomewhere":
 location.href = "http://www.wrox.com";
 break;
 case "sayHi":
 alert("hi");
 break;
 }
});