用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 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 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中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
php中hashtable实现示例分享
2014/02/13 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
JavaScript 全角转半角部分
2009/10/28 Javascript
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
python银行系统实现源码
2019/10/25 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
Ruby如何创建一个线程
2013/03/10 面试题
初中生个人学习的自我评价
2013/12/04 职场文书
电钳专业个人求职信
2014/01/04 职场文书
超市后勤自我鉴定
2014/01/17 职场文书
周年庆促销方案
2014/03/15 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
报到证办理个人委托书
2014/10/06 职场文书
2014年检验科工作总结
2014/11/22 职场文书
二婚主持词
2015/06/30 职场文书
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android