JavaScript高级程序设计读书笔记-事件

JavaScript和HTML之间的交互是通过[color=red]用户和浏览器操作页面时引发的事件（event）[/color]来处理的。

事件流：意味着在页面上可有不仅一个，甚至多个元素响应同一事件。点击页面上面的按钮，会发生什么？实际上，是点击了按钮、它的容器及整个页面。从逻辑上说，每一个元素都按照特定的顺序响应那个事件。[color=red]事件发生的顺序（也就是事件流）[/color]是IE4.0和Netscapse4.0在事件支持上的主要差别。

冒泡型事件：
[color=red]IE上的解决方案是绰号为冒泡（dubbed bubbling）[/color]的技术。冒泡型事件的基本思想是，事件按照从最特定的事件目标到最不特定的事件目标（document对象）的顺序触发。
IE6下的冒泡过程如下图：
[img]http://dl.iteye.com/upload/attachment/585561/dbe033e9-0a26-3d36-8302-246db0c3ec38.png[/img]
Mozilla 1.0下的冒泡过程如下图：
[img]http://dl.iteye.com/upload/attachment/585563/dcf89a3e-51aa-326c-a26d-48f16d8d5a26.png[/img]

捕获型事件：
Netscape Navigator4.0使用了捕获型事件（event capturing）。事件的捕获和冒泡刚好是相反的两种过程。捕获型事件中，事件从最不精确的对象（document对象）开始触发，然后到最精确的对象。

DOM流事件：
[color=red]DOM同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生[/color]。两种事件都会触及DOM中的所有对象。

事件处理函数/监听函数：[color=red]用于响应某个事件而调用的函数称为事件处理函数（event handler）或者DOM称之为事件监听函数（event listener）[/color]。事件处理函数有两种分配方式：在JavaScript中通过对象属性的方式设置或者在HTML中通过元素属性的方式设置。

为每个可用事件分配多个函数：
IE：在IE中，每个元素和window对象都有两个方法：[color=red]attachEvent()和detachEvent()[/color]。attachEvent用来给一个事件附加事件处理函数，而detachEvent用来将事件处理函数分离出来。事件处理函数总是[color=red]按照添加它们的顺序进行调用的（先添加、先调用）[/color]。
DOM:DOM方法[color=red]addEventListener()和removeEventListener()[/color]用来分配和移除事件处理函数。与IE不同，这些方法需要三个参数：事件名称，要分配的函数和处理函数是用于[color=red]冒泡阶段还是捕获阶段的标识[/color]。如果事件处理函数是用于捕获阶段，第三个参数为true，用户冒泡阶段，则为false。

事件对象：
基于不同浏览器开发的开发人员都知道，获取事件信息是很重要的。事件发生时，会创建包含关于刚刚发生的事件的信息的事件对象，包含的信息有：引起事件的对象，事件发生时的鼠标信息，事件发生时的键盘信息。
[color=red]事件对象只在发生事件时才被创建，且只有事件处理函数才能访问[/color]。所有事件处理函数执行完毕后，事件对象就被销毁。

定位：
[color=red]在IE中，事件对象是window对象的一个属性event[/color]。在事件中，按照var oEvent = window.event；来访问。尽管它是window的属性，event对象还是只能在事件发生时访问。所有的事件处理函数执行完毕后，事件对象就销毁。
[color=red]DOM标准则说，event对象必须作为唯一的参数传递给事件处理函数[/color]。所以，在DOM兼容的浏览器（如Mozilla、Safari和Opera）中访问事件对象，要用：var oEvent = arguments[0]；或者直接作为参数。oDiv.onclick = function (oEvent) {};

事件的属性和方法：
IE和DOM标准的相似点：
[list]
[*]获取事件类型var sType = oEvent.type;
[*]获取按键代码（keyDown/keyUp事件）var iKeyCode = oEvent.keyCode;
[*]检测Shift、Alt、Ctrl键var bShift = oEvent.shiftKey; altKey ctrlKey
[*]获取客户端坐标var iClientX = oEvent.clientX; client
[*]获取屏幕坐标 var iScreenX = oEvent.screenX; screen
[/list]
IE和DOM标准的不同点：
[list]
[*]获取目标IE：oEvent.srcElement DOM：oEvent.target
[*]获取字符代码
[*]组织某个事件的默认行为IE：oEvent.returnValue = false; DOM：oEvent.preventDefault();
[*]停止事件复制（冒泡） IE：oEvent.cancelBubble = true; DOM：oEvent.stopPropagation();
[/list]

事件的类型：鼠标事件、键盘事件、HTML事件、变化事件（DOM标准事件）
鼠标点击事件的触发顺序：mousedown、mouseup、click、mousedown、mouseup、click、dblclick
鼠标移动事件的触发顺序：mouseout、mousemove、moseover