test.html
<!document html>
<html>
<body>
<button id="mybth"> </button>
<script src="EventUtil.js"></script>
</body>
</html>
EventUtil.js
/*
保证处理事件的代码在大多数浏览器中都能一致运行。
*/
var EventUtil = {
addHander: 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;
}
},
getEvent: function(event){ //返回对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){
if(element.removeEventListener){
element.removeEventListener(type, handler, false);
}
else if(element.detachEvent){
element.detachEvent("on" + type, handler);
}
else{
element["on" + type] = null;
}
},
stopPropagation: function(event){ //尝试使用DOM方法阻止事件流,否则使用cancelBubble属性。
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancelBubble = true;
}
},
};
var bth = document.getElementById("mybth");
var handler= function(){
alert("Clicked");
};
EventUtil.addHander(bth, "click", handler);