仅IE6/7/8中添加同一个事件handler多次触发后会执行多次

本文介绍了一种兼容多种浏览器的事件绑定方法,并通过示例展示了在不同浏览器环境下,使用addEventListener和attachEvent添加事件监听器时的行为差异。

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

如下

<div id="d1" style="width:200px;height:200px;background:gold;"></div>
<script>
	function addEvent(el, type, fn){
		if(el.addEventListener){
			el.addEventListener(type, fn, false);
		}else if(el.attachEvent){
			el.attachEvent('on'+type, fn);
		}
	}
	function handler(){
		alert("hello");
	}
	var el = document.getElementById('d1');
	addEvent(el, 'click', handler);
	addEvent(el, 'click', handler);
</script>

点击黄色背景div

IE6/7/8 :弹出2次hello

IE9/Firefox/Safari/Chrome/Opera :弹1次hello

 

需要注意的是IE9,它支持标准的addEventListener添加事件,但同时仍然保留了之前IE专有的attachEvent。即IE9中也可以使用attachEvent添加事件。即使如此,使用attachEvent添加事件,在IE9中对于同一个事件handler添加多次,仍然只执行一次。如下

<div id="d1" style="width:200px;height:200px;background:gold;"></div>
<script>
	function handler(){
		alert('hello');
	}
	var el = document.getElementById('d1');
	el.attachEvent('onclick', handler);
	el.attachEvent('onclick', handler);
</script>

 

如果你正在使用IE6/7/8浏览本文,点击试试

 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值