用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有关的小细节
Apr 02 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 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开发规范手册之PHP代码规范详解
2011/01/13 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
ext 同步和异步示例代码
2009/09/18 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
浅谈Python 的枚举 Enum
2017/06/12 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
高中生自我评价个人范文
2013/11/09 职场文书
2014年情人节活动方案
2014/02/16 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
python计算列表元素与乘积详情
2022/08/05 Python