window.attachEvent和addEventListener

本文介绍了如何在JavaScript中使用attachEvent和addEventListener方法为同一事件绑定多个处理函数。这两种方法分别适用于Internet Explorer和其他现代浏览器如Firefox和Opera。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

以前写 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 (window.attachEvent) {  
                window.attachEvent("onload", remove);  
            } else if (window.addEventListener) {  
                window.addEventListener("load", remove, false);    
            }              
            function remove() {  
                var div = document.getElementById("divprogressbar");  
                document.body.removeChild(div);  
            } 

注意:attachEvent 所指派的多个过程的执行顺序是随机的,所以这几个过程之间不要有顺序依赖。另外 attachEvent 和 addEventListener 不仅仅适用于 window 对象,其他的一些对象也支持该方法。


通过window.attachEvent来监听事件

<SCRIPT LANGUAGE="JavaScript" type="text/JavaScript">
function initHMenus(){
alert("你触发了onresize事件!");
}
//以下语句解释为:当window触发onresize:改变窗口大小和切换窗口时,则调用initHMenus方法。
window.attachEvent("onresize",initHMenus);
也可以:window.attachEvent("onload",initHMenus);表示在页面加载时就会调用initHMenus方法。
</SCRIPT>

window的事件可以是:onblur,onerror,onfocus,onload,onresize,onunload等等


### 事件监听机制 在 JavaScript 中,`window.addEventListener` 是用于监听浏览器窗口事件的标准方法。通过该方法,可以为 `window` 对象绑定多个事件监听器,而不会覆盖原有的监听器。这种方式相比直接使用 `window.onsomeevent` 更加灵活安全,因为它允许同时注册多个处理函数,而不会互相干扰[^1]。 #### 基本语法 `window.addEventListener` 的基本语法如下: ```javascript window.addEventListener(eventType, callbackFunction, useCapture); ``` - `eventType`:表示要监听的事件类型,例如 `"resize"`、`"scroll"`、`"unload"`、`"beforeunload"` 等。 - `callbackFunction`:当事件发生时要执行的回调函数。 - `useCapture`:可选参数,表示是否在捕获阶段触发事件,默认为 `false`(冒泡阶段触发)。 #### 示例:监听窗口大小变化 以下示例演示了如何使用 `window.addEventListener` 监听窗口大小变化事件: ```javascript window.addEventListener('resize', function() { console.log('窗口大小已改变'); }); ``` 当浏览器窗口大小发生变化时,控制台会输出 `"窗口大小已改变"`。这种方式可以确保即使有多个监听器,也不会相互干扰。 #### 示例:在页面关闭或刷新前执行清理操作 `beforeunload` 事件常用于在页面关闭或刷新前释放资源或保存状态信息。以下代码演示了如何在页面卸载前清除定时器: ```javascript var timer = setInterval(function() { console.log('定时器运行中...'); }, 1000); window.addEventListener('beforeunload', function(e) { if (timer) { clearInterval(timer); timer = null; } }); ``` 此代码在页面加载时启动一个每秒输出日志的定时器,并在用户离开页面前清除该定时器,以避免内存泄漏不必要的资源占用[^3]。 #### 示例:处理事件对象 在某些事件处理函数中,需要访问事件对象(`event`)来获取更详细的信息。例如,在事件处理函数中获取事件对象的通用写法如下: ```javascript window.addEventListener('click', function(e) { var event = e || window.event; console.log('点击事件触发,坐标:', event.clientX, event.clientY); }); ``` 这种方式确保了在不同浏览器中都能正确获取事件对象,避免因浏览器兼容性问题导致的错误[^2]。 #### 注意事项 - `window.addEventListener` 是现代浏览器广泛支持的方法,但在某些旧版浏览器(如 IE8 及更早版本)中不被支持。如果需要兼容旧浏览器,可以使用 `window.attachEvent` 方法作为替代方案。 - 在使用 `addEventListener` 时,应注意避免内存泄漏。如果某个监听器不再需要,应使用 `window.removeEventListener` 显式移除,以防止不必要的资源占用。 - 在某些移动端浏览器(如 iOS 的 Safari)中,`beforeunload` 事件可能无效,建议使用 `pagehide` 等替代事件来处理页面状态保存逻辑[^4]。 ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值