用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 相关文章推荐
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 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 class类的用法详细总结
2013/10/17 PHP
php简单smarty入门程序实例
2015/06/11 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
vue实现路由监听和参数监听
2019/10/29 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
Python实现Linux下守护进程的编写方法
2014/08/22 Python
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Django中使用group_by的方法
2015/05/26 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
用Python读取几十万行文本数据
2018/12/24 Python
详解python编译器和解释器的区别
2019/06/24 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
Pandas的Apply函数具体使用
2020/07/21 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
2014年中班元旦活动方案
2014/02/14 职场文书
银行服务感言
2014/03/01 职场文书
面试必备的求职信
2014/05/25 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript