用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 常用功能总结
Mar 18 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
jQuery实现查看图片功能
Dec 01 jQuery
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
一个不错的用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身份证校验码计算方法
2016/08/10 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
微信小程序实现下载进度条的方法
2017/12/08 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
在Python中使用__slots__方法的详细教程
2015/04/28 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
Python面向对象程序设计示例小结
2019/01/30 Python
Python按钮的响应事件详解
2019/03/04 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
Python 如何测试文件是否存在
2020/07/31 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
考试作弊被抓检讨书
2014/01/10 职场文书
六一儿童节活动策划方案
2014/01/27 职场文书
新闻人物通讯稿
2014/10/09 职场文书
《给予树》教学反思
2016/03/03 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
使用Python开发冰球小游戏
2022/04/30 Python
关于的python五子棋的算法
2022/05/02 Python