window.attachEvent 实现 window.load多个函数2009-05-10 17:24以前写 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);
}
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 sunet_addEvent(obj, evType, fn),如下:
function sunet_addEvent(obj, evType, fn)
{
if (obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
}else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
}else{
return false;
}
}
function sunet_addEvent(obj, evType, fn)
{
if (obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
}else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
}else{
return false;
}
}
// 调用例子: Java代码
sunet_addEvent(window,"locad",init);
sunet_addEvent(window,"locad",init);
JavaScript中的5种事件使用方式解说(转)
为组件提供事件处理入口,可以极大的提高组件的封闭性,同时又能让组件很好的和外界通信。并且这也是我们已经习惯使用的一种开发模式,.NET、DHTML等都提供了一套完整的事件处理模型。下面是关于使用DHTML中事件的一个总结。
DHTML提供了3种事件的使用方式,它们分别是:
1、Inline HTML: <ELEMENT onXXX='handler'></ELEMENT>
这是最简单最常用的事件绑定方式,不过这里onXXX的值为handler是不太确切的说法。其实这个handler的位置可以放置任何合法的JavaScript语句,因为IE在生成DHMTL树时会为当前Element构建一个'匿名'成员方法,onXXX指向这个方法的handler。比如我们写下,<element id='elmt' onXXX='var abc =0; for ( var i=0 ; i < 100 ; i++ ) abc+=i;'></element>,实际上在DHMTL树种存在如下代码结构: function anonymous()
{
var abc =0; for ( var i=0 ; i < 100 ; i++ ) abc+=i;
}
此时anonymous方法中的this就是elmt对象。
2、Event property: object.onXXX = handler
这个使用方法是把函数名(handler)赋予element预定义的事件属性上(onXXX)。这里需要注意两个问题:
一是,我们在使用object.onXXX = handler是需要保证object已经在页面中生成。比如我们为document.body赋予事件处理函数,我们必须保证document.body已经存在,就是说我们不能在<body>之前在的全局语句中使用document.body;
二是,handler必须是函数名,和使用方法1中的handler可以是任何JavaScript语句不同!我们最容易出错的使用是,当我们习惯了在inline html中使用<element id='elmt' onXXX = 'return false'></element>后,如果这样使用elmt.onXXX='return false;'。那么就歇菜了,不会有任何执行效果,当然IE也不报错。正确的使用是:
elmt.onXXX = function() { return false; }
3、Named Script: <SCRIPT FOR = object EVENT = onclick>
IE独家支持,没有怎么使用过,不觉得有什么特别的地方哈。如果您知道它的妙处愿闻其详。
DOM提供了两种事件处理使用,它们分别是:
1、attachEvent method:
使用方法:bSuccess = object.attachEvent(sEvent, fpNotify)。解释就抄msdn了
Parameters
sEvent Required. String that specifies any of the standard DHTML Events.
fpNotify Required. Pointer that specifies the function to call when sEvent fires.
Return Value
Boolean. Returns one of the following possible values: true The function was bound successfully to the event.
false The function was not bound to the event.
DOM提供的这个事件附加方式实际上是一个集合操作,我们可以多次的向同一个事件签名上attach多个事件处理函数,比如:
window.attachEvent('onload', handler1);
window.attachEvent('onload', handler2);
window.attachEvent('onload', handler3);
window.attachEvent('onload', handlerN);
将会执行这个N个handler,但是不保证执行顺序。这里有个例外,attachEvent在document.body上attach事件'onload'没有效果,但是attch window对象的'onload'是正确的。根据页面初始化顺序来看,及document.body.attachEvent('onload', handler)返回true来看,这因该是IE的一个bug。
注意DHTML的Event Property方式和DOM的attachEvent方式的区别:
Event Property方式,当触发事件时,事件处理函数是一个无参数函数,我们只能通过event这个window的属性来读取和事件相关的信息。attachEvent方式,当事件处理函数被触发时,该函数的第一个参数arguments[0],默认是该窗口上的event。什么意思呢?不明白参看这里。
分享到:
相关推荐
本知识点将介绍 JavaScript 中两种常用的方法:attachEvent 和 addEventListener,以及它们在不同浏览器中的应用和区别。 首先,attachEvent 方法是早期 Internet Explorer 浏览器引入的事件监听方法,它的语法是:...
在探讨Javascript中使用attachEvent方法传递参数的问题时,首先需要理解attachEvent和addEventListener之间的区别,以及它们在IE浏览器中的实现差异。attachEvent是IE 8及以下版本独有的事件绑定方法,而...
jQuery内部在使用`addEventListener`或`attachEvent`之前,会先检查是否已经存在相同类型的处理函数(handlers),如果存在则不会重复绑定,而是会将新的处理函数合并到现有的handlers中。这样,无论是在IE还是其他...
除了上述方法外,还可以考虑直接修改JavaScript代码,使用`addEventListener`方法替代`attachEvent`。这种方式的好处是不仅解决了IE11不支持`attachEvent`的问题,还让代码变得更加标准化和简洁。示例代码如下: ``...
本文实例讲述了javascript中attachEvent用法。分享给大家供大家参考。具体分析如下: 一般我们在JS中添加事件,是这样子的 obj.onclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件...
在JavaScript中,`attachEvent` 和 `detachEvent` 是针对IE浏览器(Internet Explorer)的事件处理方式,它们分别用于添加和移除事件监听器。这两个方法是IE特有的,与W3C标准的 `addEventListener` 和 `...
通过addEventListener或attachEvent绑定事件处理函数,实现与用户的交互。 4. **AJAX异步通信**:AJAX(Asynchronous JavaScript and XML)允许在不刷新整个页面的情况下,与服务器交换数据并更新部分网页内容。...
JavaScript 事件机制详细研究 JavaScript 事件机制是指浏览器中发生的各种事件,例如点击、鼠标悬停、键盘输入等,JavaScript 通过捕捉这些事件来执行相应的操作。本文将详细介绍 JavaScript 事件机制的实现方式和...
13. **事件处理**:JavaScript1.5在浏览器环境中,可以用于处理用户交互事件,如点击、提交表单等,通过`addEventListener`或`attachEvent`来添加事件处理函数。 14. **JSON**:虽然JSON(JavaScript Object ...
在JavaScript中,`attachEvent` 和 `addEventListener` 是两种用于为元素添加事件处理程序的方法,主要在Internet Explorer和非IE浏览器(遵循W3C标准)中使用。它们都是用来监听和响应用户或浏览器的特定行为,如...
常见的事件如点击(click)、鼠标移动(mousemove)和键盘输入(keydown),通过`addEventListener`或`attachEvent`绑定事件监听器,实现响应用户操作的功能。 另外,JavaScript还提供了面向对象编程的概念,如构造...
2. **事件处理**:通过addEventListener或attachEvent等方法,JavaScript可以响应用户的点击、滚动、输入等交互,实现如点击购买按钮后进行支付流程、搜索框的自动补全等功能。 3. **Ajax异步通信**:利用...
1. 事件模型:JavaScript有三个级别的事件模型:DOM0级(直接在元素上设置函数)、DOM2级(通过addEventListener/attachEvent)和DOM3级(增加了更多的事件类型)。 2. 事件冒泡与事件捕获:事件在DOM树中传播时,...
通过addEventListener或attachEvent(IE浏览器)可以绑定事件处理函数,对特定事件进行响应。 描述中提到了“CSS样式文件”,CSS(Cascading Style Sheets)是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)...
通过addEventListener或attachEvent来绑定事件,使用事件处理函数执行特定操作,如弹出提示框、改变图片、播放动画等。 四、CSS样式操作 JavaScript可以直接操作元素的CSS样式,包括内联样式和类样式。可以使用...