“约见”面试官系列之常见面试题之第六十篇之事件绑定和普通事件（建议收藏）

一个很简单的示例。

普通添加事件的方法：

var btn = document.getElementById("hello");
btn.onclick = function(){alert(1);
}
btn.onclick = function(){alert(2);
}

执行上面的代码只会alert 2

事件绑定方式添加事件：

var btn = document.getElementById("hello");
btn.addEventListener("click",function(){alert(1);
},false);
btn.addEventListener("click",function(){alert(2);
},false);

执行上面的代码会先alert 1 再 alert 2

这样就可以发现这两种方法的区别了，普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。

提示：addEventListener不兼容低版本IE，使用addEventListener添加事件之前，请先处理兼容问题，这里就不展开讨论了。

本面试题为前端常考面试题，后续有机会继续完善。我是歌谣，一个沉迷于故事的讲述者。

欢迎一起私信交流。

“睡服“面试官系列之各系列目录汇总（建议学习收藏）

“约见”面试官系列之常见面试题之第六十篇之事件绑定和普通事件（建议收藏）相关推荐

“约见”面试官系列之常见面试题之第六十七篇之jsonp原理和实现（建议收藏）
一. 同源策略所有支持Javascript的浏览器都会使用同源策略这个安全策略.看看百度的解释: 同源策略,它是由Netscape提出的一个著名的安全策略. 现在所有支持JavaScript 的浏览 ...
“约见”面试官系列之常见面试题之第六十三篇之get和post区别（建议收藏）
GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数. 你可能自己 ...
“约见”面试官系列之常见面试题之第五十三篇之网站的资源优化（建议收藏）
本面试题为前端常考面试题,后续有机会继续完善.我是歌谣,一个沉迷于故事的讲述者. 欢迎一起私信交流. "睡服"面试官系列之各系列目录汇总(建议学习收藏)
“约见”面试官系列之常见面试题之第四十七篇之前端页面的组成（建议收藏）
最准确的网页设计思路是把网页分成三个层次,即:结构层.表示层.行为层. 网页的结构层(structural layer)由 HTML 或 XHTML 之类的标记语言负责创建.标签,也就是那些出现在尖括 ...
“约见”面试官系列之常见面试题之第八十篇之css常见属性（建议收藏）
CSS3增加的新的属性和新属性值很多,其中的重点,比如Flex布局,2D3D效果,关键帧动画等,我们会在其他篇拿出来详细讲解,并附上实例和代码,供大家参考学习.本文只介绍其他常用且兼容性良好(IE9及 ...
“约见”面试官系列之常见面试题之第七十篇之==和===（建议收藏）
==和===的区别== 在比较时等号左右两侧数据类型不同时会先转成相同数据类型,再比较== 是相对比较: === 是绝对比较1.1 字符串 == 数字 :字符串转换成数字console.log(1 = ...
“约见”面试官系列之常见面试题之第六十九篇之document.ready和onload的区别（建议收藏）
document.ready和onload的区别为:加载程度bai不同du.执行次数不同.执行速度zhi不同. 一.加载程度不同 1.document.ready:在DOM加载完成dao后就可以可以对 ...
“约见”面试官系列之常见面试题之第六十八篇之本地对象内置对象宿主对象（建议收藏）
首先解释下宿主环境:一般宿主环境由外壳程序创建与维护,只要能提供js引擎执行的环境都可称之为外壳程序.如:web浏览器,一些桌面应用系统等.即由web浏览器或是这些桌面应用系统早就的环境即宿主环境. ...
“约见”面试官系列之常见面试题之第六十六篇之事件委托的原理和实现（建议收藏）
事件委托(事件代理)原理:简单的说就是将事件交由别人来执行,就是将子元素的事件通过冒泡的形式交由父元素来执行. 为什么要用时间委托? 在JavaScript中,添加到页面上的事件处理程序数量将直接关系 ...

“约见”面试官系列之常见面试题之第六十篇之事件绑定和普通事件（建议收藏）

“约见”面试官系列之常见面试题之第六十篇之事件绑定和普通事件（建议收藏）相关推荐

最新文章

热门文章