javascript看qq中多事件绑定的执行顺序
事件绑定的执行次序
在W3C的标准下,事件绑定使用的是addEventLisenter。
但微软这家伙经常不按常理出牌。它提供的事件绑定方法是attachEvent。
关于attachEvent的种种不足,先不一一列举。或许我们已经忍受着用attachEvent来绑定事件。 //object.attachEvent(event, function);
el.attachEvent('onclick', method);
但当在同一元素上绑定多次,你就会知道,微软的这个私人的方法又是多么“不可理喻”。 el.attachEvent("onclick", method1);
el.attachEvent("onclick", method2);
el.attachEvent("onclick", method3);
el.attachEvent("onclick", method4);
在各个IE下运行,点击el后,各个方法的执行次序是:
IE6/IE7: method2 -> method4 -> method3 -> method1
IE8: method4 -> method3 -> method2 -> method1
IE9: method1 -> method2 -> method3 -> method4
IE6/7是一种看不出规律的随机执行,IE8是逆序执行,IE9是顺序执行。
无论常识还是W3C标准,这种同一个事件绑定了多个方法的情况,方法的执行次序都应该是先绑定先执行。从IE6-IE9的演变,可以看得出微软还是有在不断改进的。但毕竟各个版本的IE存在,使得我们不得不注意绑定在同一事件上的多个方法之间不要有顺序依赖。
YUI2的事件绑定并没有对执行次序做兼容,如果有些场景的确需要绑定多个方法且方法间需要顺序执行。那我们就只能自己实现了,大致思路是:在先判断绑定的el对象上是否已经同一个事件类型的handlers,如果有则不会重复绑定而是把该对象的handler合并到handlers中成为一个方法,相当于这样function c(){ a(); b();},按照顺序的压入方法实现在IE下不会出现绑定多个方法时能顺序执行。 functionaddEvent(el, type, handler){
if(el.attachEvent){// IE
// 为元素的事件类型创建一个哈希表
el._events=el._events||{};
if(!handler){return;}
// 取得事件处理函数的数组的引用
var handlers =el._events[type];
if(handlers){
if(typeofhandler._index==='undefined'||
handlers[handler._index]!== handler){
// 将事件处理函数存入数组
你可能喜欢
- 执行jar文件myeclipse
- javascript加载顺序
- javascript省市级联
- javascript学习笔记
- javascript规范
- javascript弹出框
- javascript经典代码
- Myeclipse生成可执行的jar文件的方法2页
- 15分钟学会MyEclipse导出jar文件再装换成exe执行文2页
- MyEclipse中jar包管理技巧-项目配置文档4页
- 15分钟学会MyEclipse导出jar文件再装换成exe执行文2页
- MyEclipse导出jar文件3页
- MyEclipse打包jar文件5页
- JavaScript原程序选择左右添加删除内容菜单2页
- javascript延迟加载2页
- Javascript在页面加载时的执行顺序4页
- JavaScript加载顺序的问题1页
- 为JavaScript程序添加客户端不可见的注释1页
- Javascript文件加载3页
- javascript---省市级联下拉框2页
- Concatenation of Graphs7页
- JavaScript获取中国各个省市、城市3页
- 省份城市联动菜单 Javascript4页
- javascript实现的省市级联功能2页
- 使用javascript解析xml实现省市县三级联动5页
- javascript学习笔记18页
- javascript学习笔记6页
- javascript学习笔记5 HTML DOM RegExp 浏览器检测 cookie11页
- javascript学习笔记4数组逻辑算数对象5页
- javascript学习笔记讲解版58页
- Java、数据结构、javascript学习笔记(2013年10月)--持续更新中。。。27页
- javascript开发规范要求(图文)1页
- javascript编程规范-修订版12页
- javascript编程规范11页
- javascript编码规范9页
- javascript编程规范15页
- C#、html、javascript相关规范46页
- javascript实现两个信息框弹出效果代码19页
- javascript弹出各种对话框2页
- javascript网页模拟弹出框7页
- jQuery和javascript控制悬浮菜单并弹出对应可拖动的资料框3页
- 04_JavaScript_复选框全选_弹出窗口16页
- JavaScript 弹出框和写入文档11页
- JavaScript 经典代码大全21页
- javascript经典代码大全20页
- 经典javaScript代码25页
- javascript经典代码大全20页
- 经典javaScript代码28页
- 经典javaScript代码13页