面试复习篇(一) ---事件篇

事件流

事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，而Netscape Communicator 的事件流是事件捕获。

事件冒泡

事件冒泡，IE的事件流是事件冒泡，事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
可以理解为从具体到一般

image.png

该图中，如果点击图片中的div元素，那么这个click事件会按照如下顺序传播：
(1)

(2)
(3)
(4)document

点击事件沿着DOM树向上传播，在每一级上都会发生，直至传播到document对象。如下图展示了事件冒泡的过程：

image.png

所有现代的浏览器都支持事件冒泡

事件捕获

是另外一种事件流。事件捕获的思想是：不太具体的节点应该更早的接收到事件，而最具体的节点应该最后接收到事件。
可以理解为由一般到具体
事件捕获的意义在于在事件达到预定目标之前捕获。由前面的例子那么单击div元素就会出现下列顺序触发click事件：
（1）document
（2）html
（3）body
（4）div
在事件捕获的过程中，document对象先接收到click的事件，然后沿着dom树依次向下，一直传播到事件的世纪目标。如下图展现了事件捕获的过程：

image.png

虽然事件捕获是Netscapr communicator 唯一支持的事件流模型，但是IE9、Safari、Chrome 、Opera 和 Firefox 目前也都支持这种事件流模型。

应该放心的使用事件冒泡，有特殊需要在使用事件捕获。

DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，这样为截获事件提供了机会；然后是事件目标接收到事件；最后一个阶段是冒泡阶段，在这个阶段对事件作出响应。以前面的例子，单击div元素会按照如下图所示的顺序触发事件：

image.png

在DOM事件流中，实际目标在捕获阶段不会接收到事件。因此，事件从document到 再到body后就停止了。下一个阶段是“处于目标阶段”，于是事件在

上发生，并在事件处理中被看成是冒泡阶段的一部分。

事件处理程序

事件就很用户或者浏览器自身执行的某种动作。例如：click、load、mouseover、都是事件的名字。响应某个事件的函数就叫事件处理函数（或事件监听函数）。事件处理程序以“on“开头，例如onclick、unload。。。。

HTML事件处理程序

点击按钮，执行一些JavaScript

image.png

这个操作通过onclick 特性并将一些JavaScript 代码作为它的值来定义，因此需要注意的是，在里面不能使用未经转义的HTML字符串，例如&、“”、<、>；

也可以写成这种形式

image.png

事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码

制定事件处理程序具有一些独到之处，首先这样会创建一个封装着元素属性值的函数，这个函数中有一个局部变量event，也就是事件对象。

image.png

image.png

通过event对象可以直接访问事件对象。在下面这个例子中，this 值等于事件的目标元素：

image.png

image.png

可以用with扩展作用域：

image.png

在HTML中制定事件处理程序有两个缺点，首先，存在时差问题，即用户触发的时候对应的函数还没有加载完，因此使用try...catch包裹起来。以便错误不浮出。
另一个缺点是，扩展事件处理程序的作用域链在不同的浏览器中会导致不一样。

另外，html指定事件处理程序的最后一个缺点是html与js紧密耦合，因此摈弃这种方式，转而使用js指定事件处理程序。

DOM0级事件处理程序

将一个函数值赋给一个事件处理程序。
优点：1、简单
2、具有跨浏览器优势

image.png

使用这种方法，被认为是元素的方法。这时候的事件处理是被认为在元素的作用域中运行，程序中的this指向当前元素。

image.png

其中this在控制台打印，是如下结果：

image.png

在事件处理程序中，访问元素的任何属性和方法，以这种方式添加的事件处理程序会在事件流冒泡阶段处理。
删除事件处理程序：

image.png

DOM2级事件处理程序

定义了用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点都包括这2个方法，且接收3个参数：要处理的事件名，作为事件处理的函数、一个布尔值。
这个布尔值的参数如果是true：表示在捕获阶段调用事件处理程序
这个布尔值的参数是false：表示在冒泡阶段调用事件处理程序

![Uploading image_113057.png . . .]