js中事件绑定addEventListener()和attachEvent()的区别
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()区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
ZeroClipboard 是国外大神开发的一个用于剪贴板复制的 JS 插件，它是基于 Flash 来实现跨浏览器的复制功能的。当我们使用 ZeroClipboard 的时候，它会悄悄隐藏一个小小的 Flash 影片(swf)，不会对我们的用户界面造成影响。我们只需要借助它实现复制功能就行了。2016-03-03
这篇文章主要介绍了不使用ajax实现无刷新提交表单的方法,需要的朋友可以参考下2014-12-12
Bootstrap入门教程一Hello Bootstrap初识
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap是基于 HTML5、CSS3和Javascriopt开发的。这篇文章主要介绍了基于Bootstrap3实现漂亮简洁的CSS3价格表（精美代码版）,需要的朋友可以参考下2017-03-03
大家都知道将多维数组（尤其是二维数组）转化为一维数组是业务开发中的常用逻辑，除了使用朴素的循环转换以外，我们还可以利用Javascript的语言特性和数据结构的思想实现更为简洁优雅的转换。下面跟着小编一起来学习学习关于JavaScript如何实现数组降维吧。2017-01-01
这篇文章主要介绍了javascript面向对象程序设计实践常用知识点,结合实例形式总结分析了javascript面向对象程序设计中原型引用类型、属性、方法相关操作技巧与注意事项,需要的朋友可以参考下2019-07-07
javascript跟随滚动效果插件代码（javascript Follow Plugin）
这篇文章介绍了javascript跟随滚动效果插件代码（javascript Follow Plugin），有需要的朋友可以参考一下2013-08-08
下面小编就为大家带来一篇浅谈JS中的bind方法与函数柯里化。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了uni-app:登录与支付-- 三秒后自动跳转,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
本文主要介绍了HBuilderX开发小程序的一些问题，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要为大家详细介绍了原生JavaScript实现网页版计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
最新评论