用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 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
一个不错的用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通用防注入程序 推荐
2011/02/26 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
PHP模块memcached使用指南
2014/12/08 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
JS实现分页导航效果
2020/02/19 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
对Python _取log的几种方式小结
2019/07/25 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
财务人员个人求职信范文
2013/12/04 职场文书
教育学习自我评价
2014/02/03 职场文书
运动会方队口号
2014/06/07 职场文书
师范生求职信
2014/06/14 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书