[JavaScript]onclick、addEventListener、attachEvent详解

var box = document.getElementById(“box1”);

box.addEventListener(“click”, function(){

alert(“s1”);

}, false);

box.addEventListener(“click”, function(){

alert(“s2”);

}, false);

}, false);

// 先弹出s1 ，然后弹出 s2

可以看出 addEventListener() 可以解决一个对象允许同时绑定多个相同事件的问题。而且，可以设置冒泡和捕获，true 表示捕获，false 表示冒泡。而且可以屏蔽重复的函数，例：

window.addEventListener(‘load’, init, false);

window.addEventListener(‘load’, init, false);

function init() {

alert(‘ss’);

}

上面的这段代码只会弹出一次 ss。

使用 addEventListener 添加的事件，需要使用 removeEventListener 方法来移除。

不用的事件要记得移除。

递归调用的方法也要记得移除，以免太多递归导致浏览器卡死。

例：

window.addEventListener(‘load’, function () {

var box = document.getElementById(‘box’);

box.addEventListener(‘click’, function () { //不会被误删

alert(‘Lee’);

}, false);

box.addEventListener(‘click’, toBlue, false);

//引入切换也不会太多递归卡死

}, false);

function toRed() {

this.className = ‘red’;

this.removeEventListener(‘click’, toRed, false);

this.addEventListener(‘click’, toBlue, false);

}

function toBlue() {

this.className = ‘blue’;

this.removeEventListener(‘click’, toBlue, false);

this.addEventListener(‘click’, toRed, false);

}

IE 实现了与 DOM2级 中类似的两个方法： attachEvent() 和 detachEvent()。这两个方法接受相同的参数：事件名称和函数。

attachEvent

===========

attachEvent() 的使用和 W3C 规范的 addEventListener() 使用较为相似，detachEvent() 可以解除使用 attachEvent() 绑定的事件处理函数。

例：

window.attachEvent(“onload”, function(){

var box = document.getElementById(“box”);

box.attachEvent(“onclick”, function(){

alert(“s1”);

});

});

需要说明的是：

1、IE 不支持捕获，只支持冒泡，所以 attachEvent() 函数并没有像 addEventListener() 函数那样可以设置冒泡或者捕获。

2、attachEvent() 添加事件不能屏蔽重复的函数。

3、IE 中的 this 指向的是 window 而不是 DOM 对象。

这个是什么意思呢？解释一下：

window.attachEvent(“onload”, function(){

var box = document.getElementById(“box”);

box.attachEvent(“onclick”, function(){

alert(this);

});

});

我们为 box 绑定了一个 onclick 事件，在这个事件处理函数中，弹出的这个 this 是一个 window 的 object 对象，而不是 box 对象。

4、在传统事件上，IE 是无法接受到 event 对象的，但使用了 attachEvent() 却可以。

这个是什么意思呢？解释一下：

在IE 8中：

var box = document.getElementById(“box”);

box.onclick = function(e){

alert(e);

}

弹出 undefined，表明没有 e 这个对象，那么在 IE 中如何正确获取事件对象 event 呢？

答案是使用 window.event

var box = document.getElementById(“box”);

box.onclick = function(){

alert(window.event);

}

如果通过attachEvent()添加事件处理程序时，event对象作为参数被传入事件处理程序，例：

window.attachEvent(“onload”, function(){

var box = document.getElementById(“box”);

box.attachEvent(“onclick”, function(e){

alert(e);

});

});

可以正确弹出 event 对象，表明：attachEvent() 可以带入 event 对象。

那么，关于第 3 点中提到的 attachEvent() 函数中的 this 指向的是 window 对象而不是 DOM 对象，该如何处理呢？

我们可以使用 call() 。

例：

window.attachEvent(‘onload’, function () {

var box = document.getElementById(‘box’);

box.attachEvent(‘onclick’, function () {

toBlue.call(box);

});

});

function toBlue() {

this.className = “blue”;

}

上面就是关于 onclick 、addEventListener、attachEvent 的相关介绍。

TIP

===

需要说明的是：

1、

用 addEventListener() 和 attachEvent() 是通过 DOM 接口去绑定事件。

一个 html 文档的解析是有顺序的，先解析标签项，再解析 DOM 项，element.onlick 事实上相当于写在标签页上，通过标签的 onclick 属性输入到文档，然后由文档解析成事件的。而后者，要在文档解析完成以后，通过文档的 dom 接口去绑定的事件，虽然结果是一样的，都是 click 事件，但是过程是不同的。

2、

通过这三种方式绑定的事件，怎么取消呢？

element.onclick

element.onclick = null;

这样就可以取消绑定在 element 上的事件处理程序了。

通过 addEventListener() 添加的事件处理程序只能通过 removeEventListener() 来移除，并且移除时传入的参数与添加处理程序时使用的参数相同。通过 addEventListener() 添加的匿名函数将无法移除。

通过 attachEvent() 添加的事件处理程序要通过 detachEvent() 来移除，其他的情况和 addEventListener()一样。

3、

不管是 IE 还是非 IE ，通过 HTML 标签属性指定的事件处理程序时，变量 event 中保存着 event 对象。

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+点击【学习资料】即可免费领取！

目、讲解视频，并且会持续更新！**

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+点击【学习资料】即可免费领取！

[外链图片转存中…(img-2JID2FuB-1712270526978)]

[外链图片转存中…(img-NFY6J9Wy-1712270526978)]