跨平台事件
什么叫跨平台事件？即在不同的浏览器上执行同一事件，所使用的方法不同。
什么是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对象。
eventutil.formatevent=function(event)
{
if(isie&&iswin)---检测浏览器的问题
{
event.charcode=(event.type=="keypress")?event.keycode:0;
event.eventphase=2;--表示冒泡阶段，ie仅支持冒泡阶段
}
return event;
}
以上就是javascript跨平台事件定义和用法实例详解的详细内容。