用JavaScript事件串连执行多个处理过程的方法

 更新时间:2007年03月09日 00:00:00   作者:  
最近用到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简易计算器制作

    这篇文章主要为大家详细介绍了JavaScript简易计算器制作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JavaScript 封装一个tab效果源码分享

    JavaScript 封装一个tab效果源码分享

    本文给大家分享javascript封装一个tab效果源码分享,感兴趣的朋友一起来看看吧
    2015-09-09
  • Javascript setInterval的两种调用方法(实例讲解)

    Javascript setInterval的两种调用方法(实例讲解)

    这篇文章主要是对Javascript setInterval的两种调用方法解析了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • 前后端常见的几种鉴权方式(小结)

    前后端常见的几种鉴权方式(小结)

    这篇文章主要介绍了前后端常见的几种鉴权方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • jsp 自动编译机制详细介绍

    jsp 自动编译机制详细介绍

    这篇文章主要介绍了 Jasper的自动检测实现的机制比较简单,依靠某后台线程不断检测JSP文件与编译后的class文件的最后修改时间是否相同,若相同则认为没有改动,但倘若不同则需要重新编译,需要的朋友可以参考下
    2016-12-12
  • 从JavaScript纯函数解析最深刻的函子 Monad实例

    从JavaScript纯函数解析最深刻的函子 Monad实例

    这篇文章主要为大家介绍了从JavaScript纯函数解析最深刻的函子 Monad实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • js中的原生网络请求解读

    js中的原生网络请求解读

    这篇文章主要介绍了js中的原生网络请求解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 基于iScroll实现内容滚动效果

    基于iScroll实现内容滚动效果

    这篇文章主要为大家详细介绍了基于iScroll实现内容滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-03-03
  • JS字符串处理实例代码

    JS字符串处理实例代码

    这篇文章介绍了JS字符串处理实例代码,有需要的朋友可以参考一下
    2013-08-08
  • javascript 24点游戏代码

    javascript 24点游戏代码

    非常不错的技术24点的游戏代码,他的算法值得学习,希望喜欢游戏的朋友,可以来看看
    2008-06-06

最新评论