JavaScript读书学习笔记（五）——事件

JavaScript与HTML之间的交互式通过事件来实现。事件就是文档或浏览器中发生的一些特定的交互瞬间。可以使用侦听器来预订事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型，支持页面行为（JavaScript代码）与页面外观（HTML和CSS代码）直接的松散耦合。

5.1 事件流

事件流是从页面接收事件的顺序。

5.1.1 事件冒泡

IE的事件流叫做事件冒泡，即事件开始由最具体的元素（文档中嵌套最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

5.1.2 事件捕获

事件捕获是不太具体的节点应该更早接收到数据，而具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预订目标之前捕获它。

5.1.3 DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

5.2 事件处理程序

事件就是用户或浏览器自身执行的某种动作。如click，load和mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序。事件处理程序都是以“on”开头。

5.2.1 HTML事件处理程序

某个元素支持的每种事件，都可以使用一个与响应事件处理程序同名的HTML特性来指定。这个特性的值应该是可以执行的JavaScript代码。

5.2.2 DOM0级事件处理程序

使用DOM0级方法指定的事件处理程序被认为是元素的方法。这时候的事件处理程序是在元素的作用域中运行；也就是程序中的this引用当前元素。

5.2.3 DOM2级事件处理程序

“DOM2级事件”定义了两个方法，用于指定和删除事件处理程序的操作：addEventListener()和removeEventListerner()。

5.2.4 跨浏览器的事件处理程序

addHandler()和removeHandler()。

5.3 事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。

5.3.1 DOM中的事件对象

兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序是使用什么方法，都会传入event对象。

5.3.2 跨浏览器的事件对象

5.4 事件类型

5.4.1 UI事件

UI事件指的是不一定与用户操作有关的事件。这些事件在DOM规范出现之前，都是以这种或那种形式存在的，而在DOM规范中保留是为了向后兼容。

1.load事件

JavaScript中最常用的一个事件就是load。当页面完全加载后（包括所有图像、JavaScript文件、css文件等外部资源），就会触发window上面的load事件。

2.unload事件

这个事件在文档完全被卸载后触发。只要用户从一个页面切换到另一个页面就会触发。这个事件最多用于清除引用，避免内存泄漏。

3.resize事件

当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件。

4.scroll事件

虽然scroll事件是在window对象上发生的，但实际表示的则是页面中相应元素的变化。

5.4.2 焦点事件

焦点事件在页面元素获得或失去焦点时触发。利用这些事件并与document.hasFocus()方法及document.activeElement属性配合，可以知晓用户在页面上的行踪。

5.4.3 鼠标与滚轮事件

1.客户区坐标位置

鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的clientX和clientY属性中。所有浏览器都支持者两个属性，它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。

2.页面坐标位置

页面坐标通过事件对象pageX和pageY属性，告诉事件时在页面中的什么位置发生的。这两个属性表示鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和定边计算的。

3.屏幕坐标位置

鼠标事件发生时，不仅会有相当于浏览器的位置，还有一个相当于整个电脑屏幕的位置。而通过screenX和screenY属性就可以确定鼠标事件发生时鼠标指针相当于整个屏幕的坐标信息。

4.修改键

修改键是Shift，Ctrl，Alt，Meta，它们经常用来修改鼠标事件的行为。DOM为此规定了4个属性，表示这些修改键的状态：shiftKey，ctrlKey，altKey，metaKey。

5.相关元素

在发生mouseover和mouserout事件时，还会涉及更多元素。这两个事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内。

6.更多事件信息

“DOM2级事件”规范在event对象中还提供了detail属性，用于给出有关事件的更多信息。对应鼠标事件来说，detail中包含了一个数值，表示在给定位置上发送了多少次单击。

7.鼠标滚轮事件

当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时，就会触发mousewheel事件。

5.4.4 键盘与文本事件

1.键码

在发生keydown和keyup事件时，event对象的keyCode属性中会包含一个代码，与键盘上一个特定的键对应。对数字字母字符键，keyCode属性的值与ASC码中对应小写字母或数字的编码相同。

2.字符编码

发生keypress事件意味着按下的键会影响到屏幕中文本的显示。在所有浏览器中，按下能够插入或删除字符的键都会触发keypress事件，按下其他键能否触发此事件因浏览器而异。

3.DOM3级变化

4.textInput事件

当用户在可编辑区域中输入字符时，就会触发这个事件。这个用于替代keypress的textInput事件的行为稍有不同。其一是任何可以获得焦点的元素都可以触发keypress事件，但只有可编辑区域才能触发textInput事件。二是textInput事件只会在用户按下能够输入实际字符的键时才会被触发，二keypress事件则在按下那些能够影响文本显示的键时也会触发。

5.4.5 复合事件

复合事件时DOM3级事件新添加的一类事件，用于处理IME的输入序列。IME可以让用户输入在物理键盘上找不到的字符。

5.4.6 变动事件

DOM2的变动事件能在DOM中的某一部分发生变化时给出提示。变动事件是为XML或HTML DOM设计的，并不特定的某种语言。

5.4.7 HTML5事件

1.contextmenu事件

为了实现上下文菜单，主要问题是如何确定应该显示上下文菜单，以及如何屏蔽与该操作关联的默认上下文菜单，就使用contextmenu事件。

2.beforeunload事件

为了在页面卸载前阻止这一操作。

3.DOMContextLoaded事件

在形成DOM树之后就会触发，不理会图像、JavaScript文件、CSS文件或其他资源十分已经下载完毕。支持在页面下载的早期添加事件处理程序，这也就意味着用户可以尽早地与页面进行交互。

4.readystatechange事件

提供与文档或元素加载状态有关的信息，但是这个事件的行为有时候很难预料。

5.pageshow和pagehide事件

6.hashchange事件

URL参数列表发生变化时通知开发人员。因为在ajax应用中，要经常利用URL参数列表来保存状态或导航信息。

5.5 内存和性能

5.5.1 事件委托

对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

5.5.2 移除事件处理程序