为了解决各种浏览器的差异问题，往往我们需要能够跨浏览器的程序。很多人会通过使各种的JavaScript库来解决这些问题，当然了，如果要自己编写也可以，通过使用能力检测的方法即可，从而让同一段代码在多数浏览器下一致运行。
创建一个addHandler()方法创建一个removeHandler()方法 var EventUtil = { addHandler:function(element, type, handler){ if (element.addEventListener){ element.addEventListener(type, handler,false); }else if (element.attachEvent){ element.attachEvent("on"+type, handler);//在事件类型前添加 on } else{ element["on" + type]=handler;//给元素对象属性绑定监听函数，element.ontype } },//这要添加一个逗号 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); var removeBtn = document.getElementById("myRemoveBtn"); EventUtil.addHandler(removeBtn, "click", function(){ EventUtil.removeHandler(btn, "click", handler); }); 创建一个getEvent()方法创建一个getTarget()方法创建一个preventDefault()方法创建一个stopPropagation()方法 var EventUtil = { addHandler:function(element, type, handler){//添加事件监听函数 if (element.addEventListener){ element.addEventListener(type, handler,false); }else if (element.attachEvent){ element.attachEvent("on"+type, handler);//在事件类型前添加 on } else{ element["on" + type]=handler;//给元素对象属性绑定监听函数，element.ontype } },//这要添加一个逗号 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){//获取事件对象 return event ? event : window.event; }, getTarget: function(event){//获取事件对象目标 return event.target || event.srcElement; }, preventDefault: function(event){//阻止默认事件发生 if (event.preventDefault){//标准event方法 event.preventDefault(); } else { event.returnValue = false;//IE属性，取消默认行为发生 } }, stopPropagation: function(event){//阻止冒泡 if (event.stopPropagation){//标准event方法，不再派发事件 event.stopPropagation(); } else { event.cancelBubble = true;/IE属性，阻止事件传播到包容对象 } } };实例
（1） 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); }); （2） var link = document.getElementById("myLink"); link.onclick = function(event){ event = EventUtil.getEvent(event); EventUtil.preventDefault(event);//点击链接，没有反应，阻止了默认跳转行为 }; （3） var btn = document.getElementById("myBtn"); btn.onclick = function(event){//点击按钮弹出Clicked alert("Clicked"); event = EventUtil.getEvent(event);//获取事件 EventUtil.stopPropagation(event);//阻止冒泡 }; document.body.onclick = function(event){ alert("Body clicked");//如果没有阻止冒泡，点击按钮后，先弹出clicked，然后弹出Body clicked，由于上面阻止冒泡了，所以这一步就不再发生了 };转载于:https://www.cnblogs.com/YeChing/p/6308632.html
