JS事件绑定深入
W3C很好地解决了覆盖问题、相同函数屏蔽的问题、this传递问题、添加额外方法不被覆盖等问题。
但是IE8之前的版本并不支持,IE9已完全支持了。
IE和W3C在事件绑定上存在很多差异,我们以冒泡和捕获为例来介绍。
W3C支持冒泡和捕获方式,而IE不支持捕获。
IE有自己的事件绑定机制,通过attachEvent和deleteEvent函数来实现。
首先,介绍IE解决覆盖问题的办法。
window.attachEvent('onload',function(){ alert('Lee'); }); window.attachEvent('onload',function(){ alert('Mr.Lee'); }); window.attachEvent('onload',function(){ alert('Miss.Lee'); });
输出Miss.Lee,Mr.Lee,Lee。看来,通过attachEvnet解决了覆盖问题,但输出顺序反了过了。
其次,IE不能解决相同函数屏蔽问题,即无法屏蔽,在团队开发中相同函数要注意这个问题。
接着,IE是否可以传递this呢?
window.attachEvent('onload',function(){ var box=document.getElementById('box'); box.attachEvent('onclick',function(){ alert(this); }); });
输出结果为object,其实为window对象,而不是box,看来IE不能传递this。
为了解决这个问题,大家也许会想到用匿名函数call过去,但匿名函数可读性不强,不是很推荐。
我们用事件函数来解决。若我们为box标签对象添加了事件,可以通过如下方法得到box。
var that =window.event.srcElement;
最后,如何做W3C和IE事件切换器的全套兼容呢?
详见http://edu.51cto.com/lesson/id-9553.html;
重点:跨浏览器添加事件,移除事件,阻止事件等。