用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中“+=”的应用
Feb 02 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
node网页分段渲染详解
Sep 05 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
js querySelector() 使用方法
Dec 21 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
Vue formData实现图片上传
Aug 20 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
一个不错的用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 类型转换函数intval
2009/06/20 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
Python Deque 模块使用详解
2014/07/04 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
python import 上级目录的导入
2020/11/03 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
李敖北大演讲稿
2014/05/24 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
民事诉讼代理词
2015/05/25 职场文书
放飞理想主题班会
2015/08/14 职场文书
Oracle表空间与权限的深入讲解
2021/11/17 Oracle