1.事件概述

事件：可被理解为是JavaScript侦测到的行为。

举例：这些行为指的就是页面的加载、鼠标单击页面、鼠标滑过某个区域等。

事件处理程序：指的就是JavaScript为响应用户行为所执行的程序代码。

举例：用户单击button按钮，这个行为就会被JavaScript中的click事件侦测到；然后让其自动执行，为click事件编写的程序代码，如在控制台输出“按钮被单击”。

事件驱动式：是指在Web页面中JavaScript的事件，侦测到的用户行为，并执行相应的事件处理程序的过程。

举例：鼠标移入文本区域，文本区域变色这一过程。

事件流：事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个事件传播的过程就是事件流。

事件流的传播顺序解决方案：网景（Netscape）提出了“事件捕获方式”、微软（Microsoft）提出了“事件冒泡方式”。

事件捕获方式（网景）

事件流传播的顺序应该是从DOM树的根节点到发生事件的元素节点。

事件冒泡方式（微软）

事件流传播的顺序应该是从发生事件的元素节点到DOM树的根节点。

W3C的解决方案

p规定事件发生后，先实现事件捕获，但不会对事件进行处理。

p接着进行到目标阶段，执行当前元素对象的事件处理程序，但它会被看成是冒泡阶段的一部分。最后实现事件的冒泡，逐级对事件进行处理。

2.事件的绑定方式

概念：事件绑定指的是为某个元素对象的事件绑定事件处理程序

事件的绑定方式——行内绑定式

事件的行内绑定式是通过HTML标签的属性设置实现的。

标签名可以是任意的HTML标签，如<div>标签、<button>标签等；

事件是由on和事件名称组成的一个HTML属性，如单击事件对应的属性名为onclick；

事件的处理程序指的是JavaScript代码，如匿名函数等。

注意：

由于开发中提倡JavaScript代码与HTML代码相分离。因此，不建议使用行内式绑定事件。

事件的绑定方式——动态绑定式

解决的问题：JavaScript代码与HTML代码混合编写的问题。

实现方式：在JavaScript代码中，为需要事件处理的DOM元素对象，添加事件与事件处理程序。

事件的处理程序一般都是匿名函数或有名的函数。

事件的绑定方式——动态绑定

行内绑定式与动态绑定式的异同

不同点：

实现语法不同，前者通过HTML标签的属性设置，后者在JS中处理DOM对象。

事件处理程序中关键字this的指向也不同。前者指向window对象，后者指向当前正在操作的DOM元素对象。

相同点：

同一个DOM对象的同一个事件只能有一个事件处理程序。

事件的绑定方式——事件监听式

解决的问题：同一个DOM对象的同一个事件只能有一个事件处理程序，即可给同一个DOM对象的同一个事件添加多个事件处理程序。

实现的方式：具有兼容性问题，一类是早期版本的IE浏览器（如IE6~8），一类遵循W3C标准的浏览器（以下简称标准浏览器）。

参数type指的是为DOM对象绑定的事件类型，它是由on与事件名称组成的，如onclick。

参数callback表示事件的处理程序。

参数type指的是DOM对象绑定的事件类型，它是由事件名称设置的，如click。

参数callback表示事件的处理程序。

参数capture默认值为false，表示在冒泡阶段完成事件处理，将其设置为true时，表示在捕获阶段完成事件处理。

事件监听式的两种不同实现方式的区别

实现的语法不同。

事件处理程序的触发顺序也不相同，同一个对象的相同事件，早期版本IE浏览器的事件处理程序按照添加的顺序倒序执行。而标准浏览器的事件处理程序按照添加顺序正序执行。