请教个关于跨浏览器方案解决的问题

这样子实现的化,我发现还是会存在一个误区,比如说调用该对象的方法的时候,this对象的指向就会存在分歧, 不知道它是指向window还是当前的对象. 等于还是要再判断一下,要么就是不用this对象, 这样子说来我感觉还是存在着缺陷. 怎么样改进呢?因为它最终还是调用detachEvent啊, 怎么变呢?

小学生6年级 2018-05-15

源自：JavaScript事件 2-10 事件委托与事件冒泡

收起

4回答

提问者小学生6年级 2018-05-15 20:22:29

var eventUtil = {
	// addEvent : function(elem,type,handler){
	// 	if(elem.addEventListener){
	// 		elem.addEventListener(type,handler,false);
	// 	}else{
	// 		elem.attachEvent('on'+type,handler)
	// 	}
	// },
	addEvent : function(elem,type,handler){
		if(elem.attachEvent){
			elem.attachEvent('on'+type,handler);
		}else{
			elem.addEventListener(type,handler,false);
		}
	}
}

我猜想了几个可能原因,一一试了一下找到了, 老师你像这样再试一下,就会神奇的发现在IE中 this===window了!!!!!!!!!!!!!!! 也就是调换了一下顺序, 我真是服了...技不如人. 为什么会这样.... 需要说明的是chrom中我也测试了, 并不受顺序的影响 .指向均为DOM元素

收起回答

一路电光带火花 #1

你自己是不是使用了比较低版本的IE啊，IE6-IE8中this指向是有问题的，可以看一下这个链接： https://www.51-n.com/t-4203-1-1.html

2018-05-16 09:59:06
提问者小学生6年级回复一路电光带火花 #2

首先我要说明的是，我始终讨论的都是低版本的IE。。。也就是IE6-8。如果不是的话，为什么还要写这个兼容版本呢。。。。此外，我的意思是颠倒if else条件（看我的注释部分和正常代码部分）。可以改变IE6-8中this的指向。正常来说IE6-8的中用attach绑定后this指向就是window, 但是颠倒顺序后可以变成DOM元素。应该是一个BUG把。

2018-05-16 10:18:03
一路电光带火花回复提问者小学生6年级 #3

是一个bug，链接里面有解决的方法啊。

2018-05-16 10:28:57

点开查看后面3条评论

好帮手慕星星 2018-05-15 18:53:26

测试了一下：

处理函数中写入this是没有问题的，因为在addEvent函数中，this指代的就是elem，而这个参数是我们传入的div，也就是div调用了这个函数，所以this指向的是div。

收起回答

提问者小学生6年级 #1

测试了一下,发现确实像老师说的一样,那为什么我们不写兼容性的时候,attachEvent中的this会指向window呢??? 它们本质的调用方法都一样啊,就是DOM元素.attachEvent()

2018-05-15 20:06:47
提问者小学生6年级 #2

完整的描述一下:一开始我想当然的认为this指向还会是window, 没想到却不是,这里真的让我感到奇怪了. 在原生的attachEvent中this是指向window的,我在IE6中测试了! 但是这样兼容性来实现的话居然变成DOM元素了. 它们本质的实现方法并没有变化啊.都是利用DOM元素.attachEvent(),但是放在一个大对象EventUtil中实现的时候, 居然this指向变成了DOM元素了.

2018-05-15 20:10:04
提问者小学生6年级 #3

老师你直接看上面的我个人的回复就好,这里都当废话吧.....

2018-05-15 20:25:44

提问者小学生6年级 2018-05-15 14:59:50

var eventUtil = {
	addEvent : function(elem,type,handler){
		if(elem.addEventListener){
			elem.addEventListener(type,handler,false);
		}else{
			elem.attachEvent('on'+type,handler)
		}
	},
	removeEvent : function(elem,type,handler){
		if(elem.removeEventListener){
			elem.removeEventListener(type,handler,false);
		}else{
			elem.detachEvent('on'+type,handler)
		}
	},
	stopPropagation : function(event){
		return event.stopPropagation() || (event.cancelBubble = true);
	},
	getTarget : function(event){
		return event.target || event.srctElement;
	},
	preventDefault : function(event){
		return evnt.preventDefault() || (event.returnValue = false);
	}
};

贴下代码吧, 就是addEvent主要负责判断l浏览器,本质实现还是依赖内置的方法,这两个内置方法对传入的handler(function)中的this指向有不同的判断, 这里存在分歧! .... 应该描述挺清楚了吧...

收起回答

好帮手慕星星 2018-05-15 14:32:31

你的意思是说在监听事件里面用this指代吗？this是谁调用的，就指向谁。

收起回答

提问者小学生6年级 #1

举个例子 elem.removeEventListener(type,handler,false); elem.detachEvent('on'+type,handler) 假设这两个中的handler中用到了this,问题来了,用到的时候分别代表了不同的指向, 这就存在分歧了

2018-05-15 14:56:49