用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查看html源文件
Nov 08 Javascript
JQuery 操作select标签实现代码
May 14 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
浅谈js中的bind
Mar 18 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
如何使用JavaScript策略模式校验表单
Apr 29 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 用数组降低程序的时间复杂度
2009/12/04 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
php文件下载处理方法分析
2015/04/22 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
在Python中操作字典之clear()方法的使用
2015/05/21 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
django序列化serializers过程解析
2019/12/14 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
关键字throw与throws的用法差异
2016/11/22 面试题
《雨霖铃》教学反思
2014/02/22 职场文书
安全教育演讲稿
2014/05/09 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
教师读书笔记
2015/06/29 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
python中的装饰器该如何使用
2021/06/18 Python
Vue深入理解插槽slot的使用
2022/08/05 Vue.js