特别常用的通用代码，弄清楚每个方法的作用很重要！
在JS中，DOM0级、DOM2级与旧版本IE(8-)为对象添加事件的方法不同。为了以跨浏览器的方式处理事件，需要编写一段“通用代码”，即跨浏览器的事件处理程序。EventUtil是为了平衡不同浏览器间实现事件的差异或事件方法的差异而存在的。可兼容支持DOM0级、DOM2级的浏览器或IE浏览器
EventUtil对象：
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) { //使用DOM2级方法添加事件
element.addEventListener(type, handler, false);
} else if (element.attachEvent) { //使用IE方法添加事件
element.attachEvent("on" + type, handler);
} else { //使用DOM0级方法添加事件
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;
}
},
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;
}
},
stopPropagation:function(event){ //立即停止事件在DOM中的传播
//避免触发注册在document.body上面的事件处理程序
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
},
getRelatedTarget:function(event){ //获取mouseover和mouseout相关元素
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){ //兼容IE8-
return event.toElement;
}else if(event.formElement){
return event.formElement;
}else{
return null;
}
},
getButton:function(event){ //获取mousedown或mouseup按下或释放的按钮是鼠标中的哪一个
if(document.implementation.hasFeature("MouseEvents","2.0")){
return event.button;
}else{
switch(event.button){ //将IE模型下的button属性映射为DOM模型下的button属性
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){ //获取表示鼠标滚轮滚动方向的数值
if(event.wheelDelta){
return (client.engine.opera&&client.engine.opera<9.5?-event.wheelDelta:event.wheelDelta);
}else{
return -event.detail*40;
}
},
getCharCode:function(event){ //以跨浏览器取得相同的字符编码，需在keypress事件中使用
if(typeof event.charCode=="number"){
return event.charCode;
}else{
return event.keyCode;
}
}
};
addHandler():视情况分别使用DOM2级，DOM0级和IE方法来添加事件。如IE9,Firefox，Chrome等直接第一个if，IE8及之前用第2个if，还无法添加的用DOM0级方法添加。
getEvent():在兼容DOM的浏览器中，event变量只是简单的传入和返回，在IE浏览器中，event参数未定义，为undefined，所以就会返回window.event。
getTarget():event有target属性就返target（DOM中），没有，就返srcElement属性（说明在IE里）。
preventDefault():用于取消事件默认行为，event是DOM事件对象（DOM0级和DOM2级）时返if，是IE事件对象（IE浏览器里，用DOM0的或用IE事件处理程序中的方法即attachEvent（）创建）时返else。 在其它兼容DOM的浏览器中，阻止特定事件的默认行为只需使用event对象自带的preventDefault( )方法，而在IE中，则需赋予event.returnValue的值为false才能阻止特定事件的默认行为
stopPropagation():也是如此。
getRelatedTarget():返相关元素。DOM通过event.relatedTarget返相关元素。只对事件mouseover和mouseout事件才含有值，其余事件值为null。IE8及之前版本不支持此属性，但mouseover时，IE的fromElement属性保存相关元素，mouseout时，toElement保存相关元素。（IE9支持所有。）
getButton():在mousedown和mouseup事件中存在event.button属性，DOM中其值可能为0（左键），1（中间滚轮按钮），2（右键）。而IE8及之前版本的button有7个值。所以得映射一下。
getWheelDelta():不常用
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
alert(target.tagName);
};
EventUtil.addHandler(btn, "click", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
alert(target.tagName);
});
</script>
https://segmentfault.com/a/1190000002455890
http://www.th7.cn/web/js/201412/71141.shtml