WEB前端面试真题 - 事件绑定的基本方法，什么是事件

2015/04/27 14:32:46 | 作者：HTML5学堂（码匠） | 分类：HTML5面试题 | 关键词：WEB前端,面试题,事件绑定,什么是事件

说说JavaScript的事件绑定方法并举例

HTML5学堂：对于事件，向来是公司衡量开发者水平常用的问题。每个面试者虽然都能够回答出这个问题的答案，但是详细程度不同的答案内容，直接“暴露”了应聘者的水平。在回答这个面试题时，一方面，回答的逻辑应当清晰；另一方面，回答的内容应当包含DOM0级、DOM2级（事件监听器）的基本事件绑定，还可以适当的介绍基本的兼容。

1、面试题种类

JavaScript、事件

2、面试题考核知识点

事件绑定发展沿革，不同种类的事件绑定

3、面试题注意点

首先，能够想到事件绑定的三次发展变化，以及不同事件绑定具有什么特点，再次，在提到DOM2级事件绑定的时候，最好是把两者的具体区别也书写一下。同时，关于解除绑定的方法也一并书写出来更合适~

欢迎沟通交流~HTML5学堂

4、面试题参考答案

在最初，是使用HTML事件处理程序的，也就是说，某个元素（如div），支持的每一种事件，都可以使用一个与相应事件处理程序同名的HTML特性来制定（也就是标签的一个属性），这个特性的值就是能够执行的JavaScript代码。例如：

<div onclick='alert("H5course")'>H5course</div>

但是，HTML事件处理程序的很多问题：

首先，HTML代码域JavaScript代码紧密的耦合在一起，没有实现相互分离，在进行代码的更新与维护的时候就显得异常困难。

第二，扩展事件处理程序的作用域链在不同浏览器当中会导致不同的结果。

第三，如果不采用调用函数的方式，而是像例子中那样直接书写代码，那么代码的通用性很差，会使得整站的代码量很大，通用性差。如果提取出来，存放在函数当中，那么，会面临另一个问题——当函数还没有被定义，只是HTML、CSS代码加载完毕，用户进行点击，会完全没有反应。

基于上面的这些问题，人们逐渐的去完善了事件处理程序，此时出现了DOM0级事件处理程序。（第四代WEB浏览器中出现）

DOM0级事件处理程序是什么样子的呢？其实它就是我们平时最为常用的事件绑定，如下面这个例子：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>事件-H5course</title>
</head>
<body>
<p id='btn'>DOM0级事件处理程序</p>
</body>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
alert(this.innerHTML);
}
</script>

在DOM0级事件处理程序推出之后，广为各个用户的使用，但是，却出现了这样一个问题，当我希望为同一个元素/标签绑定多个同类型事件的时候（如，为上面的这个p标签绑定3个点击事件），是不被允许的。那么，此时，出现了另一种事件处理程序，就是DOM2级的事件处理程序，在DOM2级当中，定义了两个基本方法，用于处理指定（即绑定）和删除事件处理程序的操作，分别是addEventListener()和removeEventListener()，IE9+、FireFox、Safari、Chrome和Opera都是支持DOM2级事件处理程序的。对于IE8-，则使用的是IE专有的事件处理程序：两个类似的方法——attachEvent()与detachEvent()。

addEventListener()和removeEventListener()中的第三个参数，表示的是在哪个事件阶段进行事件处理，如果是false，则指的是冒泡阶段；如果是true，则指的是捕获阶段。

欢迎沟通交流~HTML5学堂