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

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

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

冒泡型事件：
IE上的解决方案是绰号为冒泡（dubbed bubbling）的技术。冒泡型事件的基本思想是，事件按照从最特定的事件目标到最不特定的事件目标（document对象）的顺序触发。
IE6下的冒泡过程如下图：

Mozilla 1.0下的冒泡过程如下图：


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

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

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

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

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

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

事件的属性和方法：
IE和DOM标准的相似点：

• 获取事件类型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

IE和DOM标准的不同点：

• 获取目标IE：oEvent.srcElement   DOM：oEvent.target
• 获取字符代码
• 组织某个事件的默认行为IE：oEvent.returnValue = false;   DOM：oEvent.preventDefault();
• 停止事件复制（冒泡） IE：oEvent.cancelBubble = true;  DOM：oEvent.stopPropagation();

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