用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 相关文章推荐
javascript中的throttle和debounce浅析
Jun 06 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 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
PHP7匿名类用法分析
2016/09/26 PHP
jquery cookie插件代码类
2009/05/26 Javascript
javascript call方法使用说明
2010/01/11 Javascript
JavaScript 原型继承
2011/12/26 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
JS中的变量作用域(console版)
2020/07/18 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
Random 在 Python 中的使用方法
2018/08/09 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
教师个人自我鉴定
2014/02/08 职场文书
管理失职检讨书
2014/02/12 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
会计岗位职责范本
2014/03/07 职场文书
法定代表人授权委托书
2014/04/04 职场文书
党员政治学习材料
2014/05/14 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
离婚起诉书范本
2015/05/18 职场文书
集结号观后感
2015/06/08 职场文书
出生证明格式
2015/06/15 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android