javascript跨平台事件定义和用法实例详解

来源：华佗养生网

跨平台事件

什么叫跨平台事件？即在不同的浏览器上执行同一事件，所使用的方法不同。

什么是EventUtil对象？有什么作用？即将所有与事件相关的函数，融合在一起的一个容器，方便管理事件对象，它没有属性。主要处理DOM事件和IE事件的磨合，使其尽可能的相似。

下面我们来看一下DOM和IE之间的对象属性和方法做个对比（这里只指出两者之间不同的属性和方法），主要有以下五大点：
DOM属性和方法 IE属性和方法
charcode keycode
preventDefault returnValue=false
relatedTarget fromobj|toobj
stopPropation cancelBuble=true
target srcobj

我们用一个小demo看一下，能够很好的解决事件跨平台的兼容问题：

<html>
<head>
 <title>eventUtil</title>
 <script eventType="text/javascript">
 var eventUtil = {
 //监听事件
 addListener: function(obj, eventType, fn) {
 if (obj.addEventListener) {
 obj.addEventListener(eventType, fn, false);
 } else if (obj.attachEvent) {
 obj.attachEvent('on' + eventType, fn);
 } else {
 obj['on' + eventType] = fn;
 }
 },
 //返回event对象
 getEvent: function(event) {
 return event || window.event;
 //return event ? event : window.event;
 },
 //返回目标事件对象
 getTarget: function(event) {
 return event.target || event.srcobj;
 }，
 preventDefault: function(event) {
 if (event.preventDefault) {
 event.preventDefault();
 } else {
 event.returnValue = false;
 }
 }, 
 removeListener: function(obj, eventType, fn) {
 if (obj.removeEventListener) {
 obj.removeEventListener(eventType, fn, false);
 } else if (obj.deattachEvent) {
 obj.detachEvent(eventType, fn);
 } else {
 obj['on' + eventType] = null;
 }
 },
 
 stopPropagation: function(event) {
 if (event.stopPropagation) {
 event.stopPropagation();
 } else {
 event.cancelBubble = true;
 }
 }
 };
 </script>
</head>
<body>
 <input eventType="button" value="click me" id="btn" />
 <p>event</p>
 <a>Hello word!</a>
 <script eventType="text/javascript">
 function addBtnListen(event)
 {
 var event = eventUtil.getEvent(event);
 var target = eventUtil.getTarget(event);
 alert("my name is kock");
 alert(event.eventType);
 alert(target);
 eventUtil.stopPropagation(event);

 }
 function getBodyListen(event)
 {
 alert("click body");
 }
 function getLinkListen(event)
 {
 alert("prevent default event");
 var event = eventUtil.getEvent(event);
 eventUtil.preventDefault(event);
 }
 window.onload=function()
 {
 var btn = document.getobjById("btn");
 var link = document.getobjsByTagName("a")[0];
 eventUtil.addListener(btn, "click", addBtnListen);
 eventUtil.addListener(document.body, "click", getBodyListen);
 eventUtil.addListener(link, "click",getLinkListen);
 } 
</script>
</body>
</html>

上面的方法能够解决事件跨平台问题，接下来，我们看下charCode的属性。

首先给eventUtil定义一个新方法，formatEvent,接受一个参数，即Event对象。