用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 相关文章推荐
页面版文本框智能提示JS代码
Nov 20 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
easyUI 实现的后台分页与前台显示功能示例
Jun 01 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 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上传、管理照片示例
2006/10/09 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
详解Angularjs中的依赖注入
2016/03/11 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
浅谈Python中copy()方法的使用
2015/05/21 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
国窖1573广告词
2014/03/21 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript