javascript 在事件监听方面的兼容性总结,注意是由于多个浏览器的不一致,导致大家在js书写时需要考虑多个浏览器的兼容性。
1、IE使用attachEvent/detachEvent方法来添加和删除事件监听器;
w3c使用addEventListener/removeEventListener方法。
例一:
//为元素添加事件函数
//node --> 需要添加事件的元素
//type --> 事件类型的字符串		如:"click" 带引号,没有"on"
//handle --> 需要添加的函数
H.DOM.addEvent = function(node,type,handle){
	var node = H.DOM.get(node);//获取元素
	if(node.addEventListener){
		node.addEventListener(type,handle,false);
	}
	else if(document.attachEvent){
		node.attachEvent("on" + type,handle);
	}
}

2、IE对其事件使用onevent的命名方式,而w3c的是event的命名方式。(见例一)

3、IE事件监听器内使用的是一个全局的Event对象,而w3c是将event对象作为参数传递给监听器。

例二:
//获取触发事件的元素
// e --> 作为参数,表示事件本身
H.Event.getEventTarget = function(e){
	e = window.event || e;
	return e.srcElement || e.target;
}

4、为了避免触发默认的事件行为,IE的做法是要求程序员设置Event对象中的returnValue属性值为false,而w3c的做法是执行preventDefault方法。

5、IE没有提供对事件捕获阶段的支持。

6、要停止事件的传递,IE的做法是设置event对象的cancelBubble为true,而w3c的做法是设置执行stopPropagation方法。

7、IE将事件监听器当做一个独立的函数来调用,而w3c中它是作为对象的方法来调用的,这表示在ie中事件监听器中的this关键字指向的不是事件发生对象而是一个没用的全局对象(window对象)。(见例二)

8、IE在使用事件监听器方面存在内存泄露问题。在IE浏览器中,如果要为某个元素创建一个事件监听器,并且在监听器中使用该元素,则在用户进入其他页面之前,该监听器以及相关的DOM节点作占据的内存空间不会被释放。

 

mouseout有一个很让人头痛的特点,就是当一个元素触发mouseout时,它识别的不仅仅是该元素的mouseout,而且该元素的任何子元素都会起作用。

所以当我们做成导航的下拉时,mouseover没问题,但当鼠标向下移,一到达下拉的菜单时,mouseout就会被触发,最终的效果跟我们想要的不一样。

为了解决这个问题,我们引入以下例子

<h3>默认</h3>
<div id="d" style=" width:100px; height:100px; line-height:100px; border:1px #000 solid; text-align:center">
<a href="http://bbs.51js.com" target="_blank">51js</a>
</div>
<p id="msg" style="color:blue;"></p>
<hr>
<h3>解决</h3>
<div id="d1" style=" width:100px; height:100px; line-height:100px; border:1px #000 solid; text-align:center">
<a href="http://bbs.51js.com" target="_blank">51js</a>
</div>
<p id="msg1" style="color:red;"></p>
<script type="text/javascript">
document.getElementById("d").onmouseout=function(e){
 document.getElementById("msg").innerHTML+="out ";
};
document.getElementById("d1").onmouseout=function(e){
 var e = window.event || e, relatedTarget = e.toElement || e.relatedTarget;
 while(relatedTarget && relatedTarget != this){
 relatedTarget = relatedTarget.parentNode;
 if(!relatedTarget){
 document.getElementById("msg1").innerHTML+="out ";
 }
 }
};
</script>

		
 

这四个都是event属性,e.srcElement   e.toElement   e.fromElement   e.relatedTarget

toElement可以理解为鼠标移动到这个元素,也可以说是鼠标去往那个元素。

fromElement可以理解为鼠标从这个元素移走,也可以说是鼠标来自那个元素。

当要获取产生事件的对象本身时,mouseover时用toElement,mouseout时用fromElement。

srcElememt表示产生事件的元素。即无论是mouseover还是mouseout,获取的都是对象本身。正如上一行所说的,它表示为mouseover时的toElement,mouseout时的fromElement。

relatedTarget返回鼠标从哪个元素来,或者到哪个元素去。在mouseover事件中,它表示鼠标来自哪个元素,在mouseout事件中,它指向鼠标去往的那个元素。某种程度上可以说是srcElement的反向。

但重点是:IE只支持带有element的,Chrome等只支持带有target的

所以我们需要兼容……

 

 

jQuery 1.7.1已于近日发布。新版本做出多项改进,如新的事件API,委托事件的性能更高,对IE6-8的HTML5支持,对AMD规范的支持等等。同时,jQuery还弃用了某些特性,以使jQuery保持精简。

以下是jQuery 1.7.1中一些让人感兴趣的新特性:

新的统一的事件API .on()替代了.bind()、.delegate()和.live();.off()替代了.unbind()、.undelegate()和.die()。

委托事件的性能改进:最终委托事件和1.6.4相比,节省了大约一半的时间。

更好地支持IE6-8下的HTML5标签:任何试图在IE 6/7/8中使用新的类似于<section>的HTML5标签的人,毫无疑问都会遇到IE 6/7/8无法解析这些标签,甚至将这些标签从文档中移除的问题。在jQuery 1.7.1中,为较旧IE版本中 .html() 一类的方法建立了对HTML5的支持。这一功能和以前的innerShiv相同。仍然需要在文档头部加入HTML5Shiv以使旧IE版本支持HTML5标签。

动画切换效果如.slideToggle()和.fadeToggle()更加直观 – 当前一个动画过早结束时,后续的动画能够恰当地重置。

支持AMD规范 jQuery现在可以和遵循AMD规范的脚本加载器协作,比如RequireJS或者curl.js。

jQuery团队还宣布,他们将开始弃用过时的特性,以使代码库更加精简,同时提高性能。有些API,比如.live()和.end()已在jQuery 1.7.1中被弃用 – 这些方法还将继续有效,但为了兼容以后的版本不建议使用它们。

一些非标准的特性在1.7.1版本中被彻底移除了

event.layerX和event.layerY

jQuery.isNaN()(非正式的函数)

jQuery.event.proxy()(非正式的方法)

关于新的弃用策略和已被弃用的特性,你可以在jQuery官网中获得更多信息。

© 2012 Hedgehog Suffusion theme by Sayontan Sinha