用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 相关文章推荐
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
js 页面关闭前的出现提示的实现代码
May 25 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
js时间查询插件使用详解
Apr 07 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 Javascript
js实现3D旋转相册
Aug 02 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中if和or运行效率对比
2014/12/12 PHP
浅谈php自定义错误日志
2015/02/13 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
你应该知道的python列表去重方法
2017/01/17 Python
TensorFlow实现创建分类器
2018/02/06 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
centos7之Python3.74安装教程
2019/08/15 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
python多线程并发及测试框架案例
2019/10/15 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
精灵市场:Pixie Market
2019/06/18 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
同事吵架检讨书
2014/02/05 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
创业计划书之花店
2019/09/20 职场文书
六年级作文之关于梦
2019/10/22 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python