用JavaScript事件串连执行多个处理过程的方法


Posted in Javascript onMarch 09, 2007

最近用到JavaScript 事件处理机制,找了些资料。
以前写 JavaScript 程序时,事件都是采用 

object.event = handler;

的方式初始化。这种方式对于 Internet Explorer、Mozilla/Firefox 和 Opera 来说很通用。但是有一个问题就是,这种方式只能一个事件对应一个事件处理过程。如果希望一个事件可以依次执行多个处理过程就不好用了。
但是 Internet Explorer 从 5.0 开始提供了一个 attachEvent 方法,使用这个方法,就可以给一个事件指派多个处理过程了。attachEvent 对于目前的 Opera 也适用。但是问题是 Mozilla/Firefox 并不支持这个方法。但是它支持另一个 addEventListener 方法,这个方法跟 attachEvent 差不多,也是用来给一个事件指派多个处理过程的。但是它们指派的事件有些区别,在 attachEvent 方法中,事件是以 “on” 开头的,而在 addEventListener 中,事件没有开头的 “on”,另外 addEventListener 还有第三个参数,一般这个参数指定为 false 就可以了。
因此要想在你的程序中给一个事件指派多个处理过程的话,只要首先判断一下浏览器,然后根据不同的浏览器,选择使用 attachEvent 还是 addEventListener 就可以了。实例如下:
if (document.all) {  
    window.attachEvent('onload', handler1);  
    window.attachEvent('onload', handler2);  
}  
else {  
    window.addEventListener('load', handler1, false);  
    window.addEventListener('load', handler2, false);  
} 
注意:attachEvent 所指派的多个过程的执行顺序是随机的,所以这几个过程之间不要有顺序依赖。另外 attachEvent 和 addEventListener 不仅仅适用于 window 对象,其他的一些对象也支持该方法。
function addEvent(obj, evenTypeName, fn){  
 if (obj.addEventListener){  
    obj.addEventListener(evenTypeName, fn, true);  
    return true;  
 } else if (obj.attachEvent){  
    return obj.attachEvent("on"+evenTypeName, fn);  
 } else {  
    return false;  
 }  
} 
Javascript 相关文章推荐
Jquery cookie操作代码
Mar 14 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
详解A标签中href=""的几种用法
Aug 20 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 Javascript
一个不错的用JavaScript实现的UBB编码函数
Mar 09 #Javascript
B/S开发中常用javaScript技术与代码
Mar 09 #Javascript
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 #Javascript
超级兔子让浮动层消失的前因后果
Mar 09 #Javascript
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 #Javascript
javascript的对话框详解与参数
Mar 08 #Javascript
打开超链需要“确认”对话框的方法
Mar 08 #Javascript
You might like
php中取得URL的根域名的代码
2011/03/23 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
两个Javascript小tip资料
2010/11/23 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
Vue Router中应用中间件的方法
2020/08/06 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
python格式化字符串实例总结
2014/09/28 Python
Python自动生产表情包
2017/03/17 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
Python if语句知识点用法总结
2018/06/10 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
Python使用Matlab命令过程解析
2020/06/04 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
网吧收银员岗位职责
2013/12/14 职场文书
三好学生自我鉴定
2013/12/17 职场文书
公开服务承诺制度
2014/03/26 职场文书
三八活动策划方案
2014/08/17 职场文书
工程质量保证书
2015/05/09 职场文书
高中信息技术教学反思
2016/02/16 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS