用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 相关文章推荐
lib.utf.js
Aug 21 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
JQuery实现展开关闭层的方法
2015/02/17 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
jQuery pjax 应用简单示例
2018/09/20 jQuery
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
Python复制目录结构脚本代码分享
2015/03/06 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
详解Python3 pandas.merge用法
2019/09/05 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
Python实现图片添加文字
2019/11/26 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
浅谈Python __init__.py的作用
2020/10/28 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
快速创建python 虚拟环境
2020/11/28 Python
python中doctest库实例用法
2020/12/31 Python
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
安全教育心得体会
2013/12/29 职场文书
高一化学教学反思
2014/02/05 职场文书
农村文化活动总结
2014/08/28 职场文书
公司员工手册范本
2015/05/14 职场文书