用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的Function详细
Nov 14 Javascript
几个javascript操作word的参考代码
Oct 26 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
js验证整数加保留小数点的简单实例
Dec 02 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
vue实现匀速轮播效果
Jun 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+MYSQL中文乱码问题
2015/07/01 PHP
浅谈PHP的反射机制
2016/12/15 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
javascript 定义新对象方法
2010/02/20 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
创意广告词
2014/03/17 职场文书
客房部经理岗位职责
2015/02/02 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python