什么叫跨平台事件？即在不同的浏览器上执行同一事件，所使用的方法不同。
什么是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对象。
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright © 2019-2024 51dongshi.com 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
