87,997
社区成员
发帖
与我相关
我的任务
分享跨浏览器事件绑定的奇怪现象和IE8不能执行的问题？
MyEvent.html代码：
MyEvent.js代码：
在addEvent函数里面，我分别加了三个alert，分别alert 1、2、3。
我绑定了两个事件：
myevent.addListener(document.links, 'click', myCallback);
myevent.addListener(document, 'keydown', moveCallback);
其中第一个事件在ie8 chrome下都能良好运行，但是第二个事件在ie8下却没反应，应该如何更改addEvent里面的代码或者别的？
想不明白的奇怪现象：
同一浏览器下绑定不同的事件所用的函数为什么不一样？在chrome下，会alert('1')和alert('3')，然后alert('3')多次，为何会有连续多个alert('3')？不应该就是绑定两个事件对象，执行两次吗？
<!DOCTYPE html5>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style type="text/css">
#move{
background: red;
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">www.baidu.com</a>
<div id="move">aaaa</div>
<script type="text/javascript" src="MyEvent.js"></script><!-- 因为必须要有link之后才能绑定事件 -->
</body>
</html>
MyEvent.js代码：
//myevent
//跨浏览器的事件工具集(对象集)
function MyEvent(){
//跨浏览器事件bind
this.addEvent = function(element, event_name, callback){
if(element.addEventListener){ //modern browsers
alert('1');
element.addEventListener(event_name, callback, false);//只使用冒泡法
}
else if(element.attachEvent){ //old IE
alert('2');
element.attachEvent('on' + event_name, callback);//和书上不一样，此处有"on"
}
else{
alert('3');
element['on' + event_name] = callback;
}
}
this.removeEvent = function(element, event_name, callback){
if(element.removeEventListener){ //modern browsers
element.removeEventListener(event_name, callback, false);//只使用冒泡法
}
else if(element.detachEvent){ //old IE
element.detachEvent(event_name, callback);//
}
}
//其中的element参数也可以是一个元素数组
this.addListener = function(element, event_name, callback){
//alert(typeof element);
//alert(typeof []);
for(var i in element){
this.addEvent(element[i], event_name, callback);
}
}
this.removeListener = function(element, event_name, callback){
for(var i in element){
this.removeEvent(element[i], event_name, callback);
}
}
this.getEvent = function(event){
return (event || window.event);
}
this.getTarget = function(event){
return (event.target || event.srcElement);
}
this.stopPropagation = function(event){
var e = this.getEvent(event);
if(e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true; // IE8-
}
}
this.preventDefault = function(event){
var e = this.getEvent(event);
if(e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false; // IE8-
}
}
};
var myevent = new MyEvent();
function myCallback(e){
e = myevent.getEvent(e);
alert(myevent.getTarget(e).href);
myevent.stopPropagation(e);
myevent.preventDefault(e);
};
myevent.addListener(document.links, 'click', myCallback);//因为必须要有link之后才能绑定事件
function moveCallback(e){
var style = null;
var keynum;
var keychar;
var temp = 0;
e = myevent.getEvent(e);
//根据浏览器取CSS样式(仅限于style标签中的)
var moveDiv = document.getElementById('move');
if (window.getComputedStyle) {
style = window.getComputedStyle(moveDiv, null); // 非IE
} else {
style = moveDiv.currentStyle; // IE
}
if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which
}
keychar = String.fromCharCode(keynum);
if(keychar == 'J'){
temp = Math.max(parseInt(style.left) - 10, 0);
moveDiv.style.cssText += ("left:" + temp);
}
else if(keychar === 'K'){
temp = Math.max(parseInt(style.left) + 10, 0);
moveDiv.style.cssText += ("left:" + temp);
}
else if(keychar === 'M'){
temp = Math.max(parseInt(style.top) + 10, 0);
moveDiv.style.cssText += ("top:" + temp);
}
else if(keychar === 'I'){
temp = Math.max(parseInt(style.top) - 10, 0);
moveDiv.style.cssText += ("top:" + temp);
}
return true;
};
myevent.addListener(document, 'keydown', moveCallback);
在addEvent函数里面，我分别加了三个alert，分别alert 1、2、3。
我绑定了两个事件：
myevent.addListener(document.links, 'click', myCallback);
myevent.addListener(document, 'keydown', moveCallback);
其中第一个事件在ie8 chrome下都能良好运行，但是第二个事件在ie8下却没反应，应该如何更改addEvent里面的代码或者别的？
想不明白的奇怪现象：
同一浏览器下绑定不同的事件所用的函数为什么不一样？在chrome下，会alert('1')和alert('3')，然后alert('3')多次，为何会有连续多个alert('3')？不应该就是绑定两个事件对象，执行两次吗？
...全文
请发表友善的回复…
发表回复
寒沙胜雪 2016-01-18
- 打赏
- 举报
另外自问自答一下：
MyEvent.js 102行代码处：
if(keychar == 'J'){
temp = Math.max(parseInt(style.left) - 10, 0);
moveDiv.style.cssText += ("left:" + temp);
}
cssText在IE8下不起作用。改成：style.left
寒沙胜雪 2016-01-17
- 打赏
- 举报
谢谢大神，确实如此，受教了，谢谢。
随心而行-专心致志 2016-01-17
- 打赏
- 举报
楼上分析一针见血
天际的海浪 2016-01-17
- 打赏
- 举报
你myevent.addListener()其中的element参数要求必须是一个数组
document.links是数组。但是document不是数组
可以这样用myevent.addListener([document], 'keydown', moveCallback);
不要用 for(var i in element){ 这种方式遍历dom对象的集合数组。这会遍历出一些多于的属性出来，如果element不是数组，更会把 element对象的所有属性名遍历出来，等于是在为这些属性绑定事件。
应该用 for(var i = 0; i < element.length; i++) {
