JS 事件
JavaScript事件简介
审视任何JavaScript代码的核心，你会发现正是事件是把所有东西融合在一些。在一个设计良好的JavaScript应用程序里，你将拥有数据源 和它的视觉的表示(在HTML DOM内部)。为了同步这两个方面，你必须监视用户的交互动作并试图相应地更新用户界面。DOM和JavaScript事件的结合是任何现代web应用程 序赖以工作的至关重要的组合。
异步事件vs.线程
JavaScript里的事件系统是相当独特的。它完全地异步工作而根本不使用线程。这意味着你程序中的所有代码将依赖于其它的动作——比如用户的点击或者页面的加载——来触发。
线程化的程序设计与异步的程序设计根本的不同点在于你怎样等待事情发生。在线程化的程序里，你需要不停地反复检查条件是否满足了。而在异步程序里你只须 简单地通过事件句柄注册一个回调函数，一旦事件发生，句柄就会通过执行回调函数来让你知道。我们来探索一下假如使用线程JavaScript程序将会怎么 编写和实际使用异步回调函数JavaScript又是怎么编写的。
JavaScript线程
按目前的情况来 看，JavaScript线程并不存在。你最多是使用setTimeout回调函数来模拟，但即使是那样，也并不理想。程序6-1中所示是一段假想的线程 化的JavaScript代码，在其中你正在等待，直到页面完成加载。如果JavaScript真是一个线程化语言的语言，你将不得不做那样的事。
程序6-3. 模拟线程的JavaScript伪码
图6-1. 如果JavaScript能处理线程你将会看到什么
在实际的情况里，因为while循环持续地运行并阻断了应用程序的正常流程，true值永远不可到达。结果是用户的浏览器将会停止响应并可能崩溃。由此 可知，如果有任何人声称在JavaScript里用while循环等待动作能够成功，他要么是说着玩，要么是迷糊得厉害。
异步回调函数
使用线程不断检查更新的替代方案是使用异步的回调，这正是JavaScript所使用的。直白地说，你告诉一个DOM元素，当指定的事件发生，你想要一 个函数被调用以处理它。这意味着你只提供一个对希望执行的代码的引用，而浏览器处理所有的细节。程序6-2展示了使用事件句柄和回调函数的一段简单的代 码。你会看到在JavaScript里把一个函数绑定到事件句柄(window.onload)上所需要的实际的代码。一但页面加载完 成，window.onload就会被调用。其它通常的事件如click,mousemove和submit的情形也是这样。
程序6-2. JavaScript里的异步回调
图6-2. 使用回调函数等待页面加载的示意图
我们的简单的事件监听器和处理程序还没有立即显现的一个问题是，取决于事件类型和元素在DOM中位置的不同，事件会变得多样化并能以不同的方式来处理。下一节我们将看到事件的两个阶段及其不同点。
事件的阶段
JavaScript事件分为两个阶段执行：捕获(capturing)和冒泡(bubbling)。这意味着当事件从一个元素触发时(比如，用户点击 一个链接导致click事件被触发)，哪些元素允许处理它、以什么顺序处理它，变得多样化了。我们来看图6-3中的一个执行顺序的例子。图中说明了当用户 点击页面中的第一个元素时，哪些事件句柄以什么顺序被触发。
图6-3. 事件处理的两个阶段
从这个简单的点击链接的例子里，你们可以看到事件的执行顺序。假设用户点击了一个元素，文档的click句柄首先被触发，然后 是的句柄，然后是
审视任何JavaScript代码的核心，你会发现正是事件是把所有东西融合在一些。在一个设计良好的JavaScript应用程序里，你将拥有数据源 和它的视觉的表示(在HTML DOM内部)。为了同步这两个方面，你必须监视用户的交互动作并试图相应地更新用户界面。DOM和JavaScript事件的结合是任何现代web应用程 序赖以工作的至关重要的组合。
异步事件vs.线程
JavaScript里的事件系统是相当独特的。它完全地异步工作而根本不使用线程。这意味着你程序中的所有代码将依赖于其它的动作——比如用户的点击或者页面的加载——来触发。
线程化的程序设计与异步的程序设计根本的不同点在于你怎样等待事情发生。在线程化的程序里，你需要不停地反复检查条件是否满足了。而在异步程序里你只须 简单地通过事件句柄注册一个回调函数，一旦事件发生，句柄就会通过执行回调函数来让你知道。我们来探索一下假如使用线程JavaScript程序将会怎么 编写和实际使用异步回调函数JavaScript又是怎么编写的。
JavaScript线程
按目前的情况来 看，JavaScript线程并不存在。你最多是使用setTimeout回调函数来模拟，但即使是那样，也并不理想。程序6-1中所示是一段假想的线程 化的JavaScript代码，在其中你正在等待，直到页面完成加载。如果JavaScript真是一个线程化语言的语言，你将不得不做那样的事。
程序6-3. 模拟线程的JavaScript伪码
复制内容到剪贴板
// 在页面加载之前，持续地检查
while ( ! window.loaded() ) { }
//页面现在已经加载了，于是开始做些事情
document.getElementByIdx_x("body").style.border = "1px solid #000";
如你所见，这段代码里有一个循环，一直在检查window.loaded()是否返回true。且不说window对象根本没有loaded()这个函 数，那样的循环也决不会在JavaScript中起作用。这是因为JavaScript中的循环是阻塞式的(也就是说它们运行完成之前别的什么事都不会发 生)。假如JavaScript能够处理线程，你看到的情形将如图6-1所示。在图中，代码中的while循环持续地检查window是否已经加载。
代码:
// 注意：这段代码不能生效！// 在页面加载之前，持续地检查
while ( ! window.loaded() ) { }
//页面现在已经加载了，于是开始做些事情
document.getElementByIdx_x("body").style.border = "1px solid #000";
图6-1. 如果JavaScript能处理线程你将会看到什么
在实际的情况里，因为while循环持续地运行并阻断了应用程序的正常流程，true值永远不可到达。结果是用户的浏览器将会停止响应并可能崩溃。由此 可知，如果有任何人声称在JavaScript里用while循环等待动作能够成功，他要么是说着玩，要么是迷糊得厉害。
异步回调函数
使用线程不断检查更新的替代方案是使用异步的回调，这正是JavaScript所使用的。直白地说，你告诉一个DOM元素，当指定的事件发生，你想要一 个函数被调用以处理它。这意味着你只提供一个对希望执行的代码的引用，而浏览器处理所有的细节。程序6-2展示了使用事件句柄和回调函数的一段简单的代 码。你会看到在JavaScript里把一个函数绑定到事件句柄(window.onload)上所需要的实际的代码。一但页面加载完 成，window.onload就会被调用。其它通常的事件如click,mousemove和submit的情形也是这样。
程序6-2. JavaScript里的异步回调
复制内容到剪贴板
window.onload = loaded;
//页面加载完成时被调用的函数
function loaded() {
//页面现己加载完成了，于是干点事情
document.getElementByIdx_x("body").style.border = "1px solid #000";
}
将程序6-2的代码与6-1中的进行比较，你会看到显著的不同。唯一被立即执行的代码是将事件句柄(loaded函数)向事件监听器(onload属 性)的绑定。一旦页面完全加载，浏览器将调用与window.onload相关联的函数并执行它。JavaScript代码的流程如图6-2所示。图中展 示了在JavaScript中使用回调函数来等待页面加载的一个图示。因为实际上不可能等待事情的发生，你将一个回调函数(loaded)注册到页面加载 完成时会被调用的句柄(window.onload)上。
代码:
//注册一个页面加载完成时被调用的函数window.onload = loaded;
//页面加载完成时被调用的函数
function loaded() {
//页面现己加载完成了，于是干点事情
document.getElementByIdx_x("body").style.border = "1px solid #000";
}
图6-2. 使用回调函数等待页面加载的示意图
我们的简单的事件监听器和处理程序还没有立即显现的一个问题是，取决于事件类型和元素在DOM中位置的不同，事件会变得多样化并能以不同的方式来处理。下一节我们将看到事件的两个阶段及其不同点。
事件的阶段
JavaScript事件分为两个阶段执行：捕获(capturing)和冒泡(bubbling)。这意味着当事件从一个元素触发时(比如，用户点击 一个链接导致click事件被触发)，哪些元素允许处理它、以什么顺序处理它，变得多样化了。我们来看图6-3中的一个执行顺序的例子。图中说明了当用户 点击页面中的第一个元素时，哪些事件句柄以什么顺序被触发。
图6-3. 事件处理的两个阶段
从这个简单的点击链接的例子里，你们可以看到事件的执行顺序。假设用户点击了一个元素，文档的click句柄首先被触发，然后 是的句柄，然后是
的，等等，一直下行到元素；这称为捕获阶段。此阶段完成以后，它又再 次沿着树往上爬，,
- ,
- 元素在用户把鼠标移到上面时会改变背景颜色，当鼠标移开时又变回来(这是许多菜单的一般需要)，程序6-3里的代码可以确切地做到这一点。
程序6-3. 带鼠标悬停效果的标签导航方案复制内容到剪贴板代码:
//查找所有的- 元素，并附以事件处理函数
var li = document.getElementsByTagName_r("li");
for ( var i = 0; i < li.length; i++ ) {
//为- 元素附加mouseover事件处理函数，
//用来将元素的背景色改为蓝色
li[i].onmouseover = function() {
this.style.backgroundColor = 'blue';
};
//为- 元素附加mouseout事件处理函数，
//用来将元素的背景色改回缺省的白色
li[i].onmouseout = function() {
this.style.backgroundColor = 'white';
};
}这些代码会确实如你所设想的那样运作：鼠标移到
- 元素，并附以事件处理函数
- 元素上，它的背景色会改变，把鼠标移开，颜色又将还愿。但是，你可能没有意识到的 是，当你每次把鼠标移到
- 的时候你实际上切换了两个元素。因为
- 元素包含元素，你的鼠标同样滑过 了它，而不仅仅是
- 元素。我们来看看事件调用的精确的流程：
1.- mouseover: 鼠标到了
- 元素上
2.- mouseout: 鼠标从
- 移到了它所包含的元素
3. mouseover: 鼠标现在到了元素上
4.- mouseover: 的mousever事件向上冒泡成为
- 的mouseover
从事件调用的方式上你可能已经觉察到，你完全忽略了事件的捕获阶段；不用担心，我可没忘记它。你绑定事件监听器的方式是古老的"传统"方式：设置元素的onevent属性；它只支持事件冒泡，不支持捕获。事件的这一绑定方式及其它方式，将在下一主题论述。
除了事件调用的奇怪的顺序以外，你可能还注意到了两个意外的动作：鼠标移出- 元素和向
- 的mouseover冒泡。我们来仔细地看看。
第一个mouseover事件发生，因为如浏览器认为，你离开了父级- 元素的范围，进入了另一个元素。这是因为当前位于最上层的元素(正如相对于其父元素
- )将会接收到鼠标即时的焦点。
的mouseover向- 元素的冒泡最终成就了我们那一段代码的优美。因为你实际上没有绑定任何种类的监听器 给元素，事件于是简单地沿着DOM上行，寻找另一个正在监听的元素。冒泡过程中它所遇到的第一个元素是
- 元素，恰巧 监听着鼠标移入事件(这也正好是你想要的)。
你需要考虑的是，要是你确实给元素的mouseover绑定了事件处理程序呢？有什么方法可以停止事件的冒泡吗？这是我将要论述的另一个重要的主题。
事件的一般特性
JavaScript事件很好一面是，它们有着一些相对一致的特性，给予你开发时的更多的能力和控制。最简单和最古老的概念是事件对象，它给你一系列的 元数据和上下文相关的函数，允许你处理诸如鼠标事件和键盘按键事件等。另外，有一些函数用来修改事件的通常的捕获/冒泡流程。深入学习这些特性可以让你事 半功倍。
事件对象
事件处理函数的一个标准功能是以某种方式访问包含当前事件的上 下文信息的事件对象。这一对象在特定的事件中充当着非常有用的资源。比如，当处理键盘按下的事件时，你可以访问事件对象的keyCode属性，以得知被按 下的是哪的键。在附录B中可以找到关于事件对象的更详细的说明。
然而，事件对象棘手之处在于，IE的实现与W3C的规范并不相同。IE有一个 单独的全局事件对象(可以可靠地通过全局属性window.event访问)，而其它的每一种浏览器都把事件对象作为单个的参数传递给事件处理函数。可靠 地使用事件对象的一个例子见程序6-4，代码修改一个普通的 - 元素。我们来看看事件调用的精确的流程：
,,以及文档的事件句柄依次全部被触发。
为什么事件处理会以这种方式建立有着很特别的原因，它工作得也非常好。假设你想每一个
为什么事件处理会以这种方式建立有着很特别的原因，它工作得也非常好。假设你想每一个