用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 相关文章推荐
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
Vue+Element-U实现分页显示效果
Nov 15 Javascript
浅谈克隆 JavaScript
Nov 02 Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
python 伯努利分布详解
2020/02/25 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
自荐信需注意事项
2014/01/25 职场文书
大学军训感言400字
2014/03/11 职场文书
新闻传播专业求职信
2014/07/22 职场文书
Python实现生活常识解答机器人
2021/06/28 Python