JS事件处理程序

JS事件处理程序

之前一直对事件处理程序这个概念不是很清楚，正好趁着看js高程这本书，来总结一下。

事件处理程序是跨浏览器的，也就是说不通的浏览器处理事件处理程序不通（主要就是IE）。

事件处理程序，分为HTML事件处理程序，DOM0/DOM2级事件处理程序，以及IE事件处理程序。

一、什么是事件处理程序：

　　说起事件处理程序，需要首先理解什么是事件，事件就是用户或浏览器自身执行的某种动作。例如click，load等事件。

二、HTML事件处理程序

　　有两种方式处理HTML事件处理程序，第一种是直接在html标签中定义，第二种在js中写函数。

　　HTML事件处理程序都有一个event变量，通过event可以直接访问事件对象。

　　HTML事件的缺点：

　　1、如果页面没有完全加载完毕会出错。

　　2、HTML与JS紧密耦合。

　　3、不同浏览器出现差异。

三、DOM0级事件处理程序

　　我们经常使用的 element.onclick = function(){}，这种方式的事件处理程序就是DOM0级事件处理程序

　　DOM0级事件处理程序，是通过js指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。

　　DOM0级和HTML相比，有两个优点：
　　1、简单

　　2、跨浏览器优势（所有浏览器都支持）

四、DOM2级事件处理程序

DOM2级事件，定义了两种方方法来处理定义和删除事件处理程序：addEventListener()和removeEventListener() .

这两种方法都包含三个参数，属性名，方法，和一个boolean值。如果布尔值是false，表示在冒泡阶段调用事件处理程序，如果是true表示的是在捕获阶段处理事件处理程序。默认值是false。

五、IE事件处理程序

IE实现了与DOM中类似的两个方法，attachEvent()和detachEvent()。这两个方法接收相同的参数，事件处理程序名称和事件处理函数。

在IE浏览器中使用attachEvent()和DOM0级事件处理程序的主要区别是作用域方面。DOM0级事件处理程序的作用域是在当前元素上，而attachEvent则是全局作用域，也就是说tihs指向window。

attachEvent同样也是支持处理多个事件处理程序，但是它与DOM有个明显的区别就是后定义的代码先执行。

使用attachEvent和DOM2有同样的问题，如果把函数写在里面的话是无法取消事件监听函数的。

六、跨浏览器的事件处理程序

为了兼容IE，在开发过程中只能使用跨浏览器的事件处理程序

阅读更多内容

JS循环的执行机制

前端JS高阶面试题

JS实现继承有几种方法

JS重复输出一个给定的字符串

AngularJS引导程序