attachEvent和addEventListener

最新推荐文章于 2022-04-30 23:36:43 发布

转载最新推荐文章于 2022-04-30 23:36:43 发布

· 694 阅读

文章标签：

#绑定事件兼容

IE兼容专栏收录该内容

0 篇文章

订阅专栏

本文详细对比了attachEvent和addEventListener两种事件绑定方法的异同，包括它们在事件处理函数的绑定方式、执行顺序以及参数传递上的区别。同时，文章还介绍了如何通过自定义函数解决浏览器兼容性问题。

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

attachEvent和addEventListener在前端开发过程中经常性的使用，他们都可以用来绑定脚本事件，取代在html中写obj.οnclick=method。

相同点：

它们都是dom对象的方法，可以实现一种事件绑定多个事件处理函数。

	obj = document.getElementById("testdiv");
	obj.onclick=function(){alert('1');};
	obj.onclick=function(){alert('2');};
	obj.onclick=function(){alert('3');};

// 当使用上边三句话进行事件绑定的时候，很明显当点击ID为testdiv对象时，只能执行
//最后一句脚本。因为onclick作为一个事件处理对象，只能赋一个值，后面的赋值自动覆
//盖前面的

	obj = document.getElementById("testdiv");
	obj.attachEvent('onclick',function(){{alert('1');});
	obj.attachEvent('onclick',function(){{alert('2');});
	obj.attachEvent('onclick',function(){{alert('3');});//点击时，三个方法都会执行


	obj = document.getElementById("testdiv");
	obj.addEventListener('click',function(){{alert('1');},false);
	obj.addEventListener('click',function(){{alert(2');},false);
	obj.addEventListener('click',function(){{alert('3');},false);//点击时，三个方法都会执行
	//使用attachEvent和addEventListener时则可以实现多个事件处理函数的调用

不同点：

1.attachEvent是IE有的方法，它不遵循W3C标准，而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用 addEventListener，所以实际开发中需分开处理。

2.多次绑定后执行的顺序是不一样的，attachEvent是后绑定先执行，addEventListener是先绑定先执行。

obj = document.getElementById("testdiv");
	obj.attachEvent('onclick',function(){{alert('1');});
	obj.attachEvent('onclick',function(){{alert('2');});
	obj.attachEvent('onclick',function(){{alert('3');});
	//执行顺序是alert(3),alert(2),alert(1);



obj = document.getElementById("testdiv");
	obj.addEventListener('click',function(){{alert('1');},false);
	obj.addEventListener('click',function(){{alert('2');},false);
	obj.addEventListener('click',function(){{alert('3');},false);
	//点击obj对象时,执行顺序为alert('1'),alert('2'),alert('3');

3.绑定时间时，attachEvent必须带on，如onclick，onmouseover等，而addEventListener不能带on，如click，mouseover。这个区别在以上代码中可见。

4.attachEvent仅需要传递两个参数，而addEventListener需要传递三个参数，这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序为：捕获阶段（根节点到子节点检查是否调用了监听函数）→目标阶段（目标本身）→冒泡阶段（目标本身到根节点）。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。如果useCapture 为 false，则侦听器只在目标或冒泡阶段处理事件。要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture 设置为 true，第二次再将useCapture 设置为 false。

为了解决浏览器的兼容性可以写如下代码：

function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener)  {
        // W3C标准
        elm.addEventListener(evType, fn, useCapture);
        return true;
    } else if (elm.attachEvent) {
        //IE
        var r = elm.attachEvent(‘on‘ + evType, fn);//IE5+
        return r;
    } else  {
        elm['on' + evType] = fn;//DOM事件
    }
}

转载：https://www.cnblogs.com/dacuotecuo/p/3510823.html