js中最容易被忽视的事件问题大总结中最容易被忽视的事件问题大总结
什么叫跨平台事件？即在不同的浏览器上执行同一事件，所使用的方法不同。
什么是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>
资源评论
weixin_38713717
- 粉丝: 6
- 资源: 932
最新资源
- 适用于 Java 的 Chef 食谱.zip
- Simulink仿真快速入门与实践基础教程
- js-leetcode题解之179-largest-number.js
- js-leetcode题解之174-dungeon-game.js
- Matlab工具箱使用与实践基础教程
- js-leetcode题解之173-binary-search-tree-iterator.js
- js-leetcode题解之172-factorial-trailing-zeroes.js
- js-leetcode题解之171-excel-sheet-column-number.js
- 安卓开发从入门到精通基础教程
- js-leetcode题解之170-two-sum-iii-data-structure-design.js
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
