js中事件绑定addEventListener()和attachEvent()的区别
作者：十二啊
本文主要介绍了js中事件绑定addEventListener()和attachEvent()的区别,前者支持多函数绑定且顺序执行,后者IE兼容但顺序相反,下面就来详细的介绍一下,感兴趣的可以了解一下
JavaScript-DOM-事件绑定
当我们为元素绑定一个单击事件时，通常会想到element.οnclick=function(){}，但是要绑定多个单击函数时却会失效，并且会被最新的响应函数覆盖。所以就有了addEventListener()方法，但是IE8及以下不支持。
addEventListener()
该方法可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件触发时，响应函数将会按照函数的绑定顺序执行。有三个参数表示内容如下：
- 事件的字符串，不要on如：click而不是onclick。
- 回调函数，当事件触发时该函数被调用。
- 是否在捕获阶段触发事件，需要一个布尔值，true表示在捕获阶段触发，false则相反。一般都为false。
attachEvent()
IE8及以下不支持addEventListener()，可以通过attachEvent()为一个元素的相同事件同时绑定多个响应函数。但是事件触发时，响应函数将会后绑定先执行，与addEventListener()相反，用法相似，有两个参数：
- 事件的字符串，要on 如：onclick而不是click
- 回调函数，当事件触发时该函数被调用
注意
需要注意的是addEventListener()中的this是绑定事件的对象，attachEvent()中的this是window对象，this是谁是由调用方式决定的。call()、apply()、bind()都可以用来重定义this对象对于三种方法可以参考这篇讲解：JavaScript 中 call()、apply()、bind() 的用法。那对于浏览器调用的this我们不可修改，可以在匿名函数中调用回调函数，拿回修改权力。迂回修改！
示例
通过为按钮单击事件绑定多个响应函数的例子来试一试以上方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM-事件绑定示例</title>
<script>
window.onload = function () {
let btn = document.getElementsByTagName('button')[0];
/*
* 绑定函数
* 参数：
* obj: 要绑定事件的对象
* enentStr：事件的字符串（不要on）
* callback：回调函数
*/
function bind(obj, enentStr, callback) {
// 兼容判断
if (obj.addEventListener) {
// 大部分浏览器兼容
obj.addEventListener(enentStr, callback, false);
} else {
// IE8以下，事件名需要on
obj.attachEvent('on' + enentStr, function () {
// 浏览器调用不可修改，在匿名函数中调用回调函数，拿回修改权力
callback.call(obj);
});
}
}
// 调用绑定函数
bind(btn, 'click', function () {
alert(this);
})
bind(btn, 'click', function () {
alert('hello 啊');
})
}
</script>
</head>
<body>
<button>点我</button>
</body>
</html>到此这篇关于js中事件绑定addEventListener()和attachEvent()的区别的文章就介绍到这了,更多相关addEventListener()和attachEvent()区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！