addEventLinstener与attachEvent区别、兼容性问题

我们知道，绑定事件的方法一般是这样的：

//对象.事件 = 处理函数
//例如：
<input type="button" value="按钮" id="btn"/>
<script>document.getElementById('btn').onclick=function () {console.log("first");};
</script>

那么，为什么还要通过addEventLinstener或者attachEvent方法来绑定事件呢？通过下面一个例子你就知道通过（对象.事件 = 处理函数
）绑定事件的劣势：

<input type="button" value="按钮" id="btn"/>
<script>var btnObj = document.getElementById('btn');btnObj.onclick=function () {console.log("first");};btnObj.onclick=function () {console.log("second");};btnObj.onclick=function () {console.log("third");};
</script>

运行的结果是这样的：

很明显，通过（对象.事件 = 处理函数）的方式，为一个对象绑定多次同一事件，那么只有最后一次绑定执行，其他都被覆盖了，所以这就是为什么通过引用addEventLinstener和attachEvent为对象绑定事件了,下面一个例子弥补了（对象.事件 = 处理函数）方式的缺陷：
//关于addEventLinstener的语法可以点击查看

<input type="button" value="按钮" id="btn"/>
<script>var btnObj = document.getElementById('btn');btnObj.addEventListener("click",function () {console.log("first");},false);btnObj.addEventListener("click",function () {console.log("second");},false);btnObj.addEventListener("click",function () {console.log("third");},false);
</script>

运行的结果是这样的：

在IE8及以下的版本，运行结果是这样的：

那么试下通过attachEvent的方式来绑定事件：
//attachEvent方法不属于W3C标准，它是IE独有的，所以在MDN文档查不到此方法
/**attachEvent的用法：
参数1:事件类型—事件名字，有on
参数2:事件处理函数—函数(命名函数,匿名函数)
对象.attachEvent(事件类型,处理函数)*/

<input type="button" value="按钮" id="btn"/>
<script>var btnObj = document.getElementById('btn');btnObj.attachEvent("onclick",function () {console.log("first");});btnObj.attachEvent("onclick",function () {console.log("second");});btnObj.attachEvent("onclick",function () {console.log("third");});
</script>

在IE5-IE10的版本运行结果：

在谷歌、火狐，包括Edge的运行结果：

那么问题来了，如何让自己的代码可以在各个浏览器运行，不担心浏览器不支持而导致出错呢？我们知道如果这个属性在浏览器中不支持,那么这个属性的类型是undefined，判断这个属性的类型是不是undefined,就知道浏览器是否支持，我们来验证一下：

console.log(btnObj.addEventListener);
console.log(Boolean(btnObj.addEventListener));
console.log(btnObj.attachEvent);
console.log(Boolean(btnObj.attachEvent));

//在谷歌浏览器中运行结果：

根据这个特性，我们就可以写出对象绑定事件的兼容代码：

//为任意元素.绑定任意的事件, 任意的元素(对象),事件的类型,事件处理函数function addEventListener(element,type,fn) {//判断浏览器是否支持这个方法if(element.addEventListener){element.addEventListener(type,fn,false);}else if(element.attachEvent){element.attachEvent("on"+type,fn);}else{element["on"+type]=fn;   //如果以上两种方法都不支持，则通过（对象.事件 = 处理函数）的方式绑定事件}}

解决了兼容性问题之后，我们来解决下一个问题。
相信大家都有过使用this来添加/修改属性或方法的经历，举个例子：

<input type="button" value="按钮" id="btn"/>
<script>var btnObj = document.getElementById('btn');btnObj.onclick = function() {this.value = "修改";console.log(this);}
</script>

通过这个例子，我们可以知道：匿名函数function(){}是作为btnObj对象的方法，所以函数作为一个对象的方法，被该对象所调用，那么this指向的是该对象。

我们再来看下面的代码：

<input type="button" value="按钮" id="btn"/>
<script>var btnObj = document.getElementById('btn');btnObj.addEventListener('click',function(){this.value = '修改';console.log(this);},false);
</script>

输出的结果是：

结果和我们想象的一样，this指向的是"btnObj"对象

那么再看下面一个例子：

<input type="button" value="按钮" id="btn"/>
<script>var btnObj = document.getElementById('btn');btnObj.attachEvent('onclick',function(){this.value = '修改';console.log(this);});
</script>

在IE8运行输出的结果是：

按钮没有修改，所以this指向的并不是"btnObj"，而是指向windows对象，attachEvent是微软公司自己定义的一个方法，addEventListener是W3C标准的方法，所以区别是显而易见的。

那么我们来总结一下：

（对象.事件 = 处理函数）：

优点	缺点
用法简单、所有浏览器都支持	不能为同一对象绑定多次同一事件

addEventLinstener与attachEvent区别

addEventLinstener	attachEvent
三个参数	两个参数
谷歌、火狐、Edge支持，IE8以下版本不支持	谷歌、火狐、Edge不支持，IE5-IE10支持
addEventListener中事件的类型(事件的名字)没有on	attachEvent中的事件的类型(事件的名字)有on
addEventListener 中的this是当前绑定事件的对象	attachEvent中的this是window

addEventLinstener与attachEvent区别、兼容性问题相关推荐

Javascript 的addEventListener()及attachEvent()区别分析
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
addEventListener和attachEvent的区别
转 addEventListener和attachEvent的区别区别如下 addEventListener共有3个参数,如下所示: element.addEventListener(type,li ...
前端开发中常见的浏览器兼容性问题及解决方案
文章目录前言一.浏览器四大内核二.主流兼容问题 (一)浏览器引擎 (二)兼容问题的原因 (三) 为什么浏览器会存在兼容性问题? (四)处理兼容问题的思路 1. 要不要做? 2. 做到什么程度? ...
浏览器兼容性及其解决方案整理
一.了解浏览器主流浏览器:IE(Trident内核).Firefox(火狐:Gecko内核).Safari(苹果:webkit内核).Google Chrome(谷歌:Blink内核).Opera( ...
addEventListener和attachEvent二者绑定的执行函数中的this不相同【转载】
yuanwen http://www.jb51.net/article/32511.htm 写 addEventListener 和 attachEvent 区别的博文不少,不过大部分都把重点放置于前 ...
CSS中100%和inherit(继承)的区别，以及inherit的简单应用
CSS中100%和inherit(继承)的区别正常情况下没有区别兼容性 100% ie6+ inherit ie8+ 该元素绝对定位,父元素使用静态定位(static)或没有使用定位时 100%继 ...
javaScript盲点梳理 -- 大白话
js扫盲目录 **js基本知识** 1.js数据类型分类 2.js 的变量数据类型确定 3.变量使用 4.js中进制 5.输入输出语句 6.isNaN() 7.typeof 没有括号 8.类型转换 9 ...
JS--事件(Event)--使用
原文网址:JS--事件(Event)--使用_IT利刃出鞘的博客-CSDN博客简介说明本文介绍JavaScript对Event(事件)的使用. 官网事件介绍 - 学习 Web 开发 | MDN ...
addeventlistener事件第三个参数_简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序...
这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在htm ...

addEventLinstener与attachEvent区别、兼容性问题

addEventLinstener与attachEvent区别、兼容性问题

addEventLinstener与attachEvent区别、兼容性问题相关推荐

最新文章

热门文章