《编写高质量代码：改善JavaScript程序的188个建议》第6章 客户端编程

HTML、JavaScript和CSS构成了客户端开发的三块基石，缺一不可。JavaScript通过事件处理模型实现与HTML的交互，而CSS可以直接作用于HTML结构。在JavaScript开发中，CSS的作用不容忽视，很多交互效果都需要CSS的配合才能够实现。使用CSS和JavaScript可以创造出各种奇幻的视觉效果，利用脚本化CSS样式的能力，可以动态改变HTML的颜色、字体等。更重要的是，可以用JavaScript设置和改变元素的位置，甚至隐藏或显示元素，这意味着可以使用CSS设计动画效果。

用户交互的效果是通过操作与响应来实现的，执行操作的可以是人（即用户），也可以是物（即浏览器），做出响应的是页面上的各种对象，或者浏览器自身。在操作与响应之间，需要事件作为桥梁。鼠标单击是一个事件，单击按钮就触发了页面响应，也许会弹出一个提示框，也许会提交表单信息，也许会关闭窗口等。所有这些行为都可以由开发人员自己去设计。

建议123：比较IE和W3C事件流

IE解决事件流的方案称为冒泡（dubbed bubbling）技术。冒泡型事件流的基本思路：事件流按照从最特定的事件目标到最不特定的事件目标（document对象）的顺序触发。简单概括为事件从下向上传递，这个传递过程犹如水冒泡一样不断上升到顶端。例如：

＜script language=/"javascript/"type=/"text/javascript/"＞

function f(a){

alert(a);

}

＜/script＞

＜body onclick=/"f(/'BODY/')/"＞

＜p onclick=/"f(/'P/')/"＞冒泡型事件＜/p＞

＜/body＞

在这个示例中，单击段落文本会触发事件流。首先响应的是p元素身上绑定的鼠标单击事件，即弹出提示信息为“P”。接着响应的是body元素身上绑定的鼠标单击事件，即弹出提示信息为“BODY”。整个事件流动的顺序是从下（p元素）到上（body元素）的，如图6.1所示。

对于不同类型或版本的浏览器来说，冒泡型事件流的具体约定也略有不同。

❑IE 5.5及其以下版本：p→body→document。

❑IE 6.0及其以上版本：p→body→html→document。

❑Firefox：p→body→html→document→window。

从IE 6.0版本浏览器开始，html元素也可以接收到事件流，事件流能够影响到html元素，而这在IE 5.5及其以下版本中是不允许的。例如：

＜script language=/"javascript/"type=/"text/javascript/"＞

function f(a){

alert(a);

}

＜/script＞

＜html onclick=/"f(/'HTML/')/"＞

＜body onclick=/"f(/'BODY/')/"＞

＜p onclick=/"f(/'P/')/"＞冒泡型事件＜/p＞

＜/body＞

＜/html＞

在这个示例中，单击段落文本会触发事件流。首先响应的是p元素身上绑定的鼠标单击事件，接着响应的是body元素身上绑定的鼠标单击事件，最后是html元素身上绑定的鼠标单击事件，如图6.2所示。Firefox类型浏览器支持冒泡型事件流，但它能够影响到全局作用域，也就是说，事件流最后会影响到window对象，如图6.3所示。

捕获型事件流与冒泡型事件流正好相反，事件总是从最不精确的对象（document对象）开始触发，最后到最精确的对象，即事件流从上到下按顺序响应。该解决方案从Netscape 4.0版本浏览器开始得到支持。例如，上面的示例在Netscape 4.0及其以上版本浏览器中运行，单击段落文本会首先触发html元素，接着是body元素，最后是p元素，如图6.4所示。

DOM 2.0对事件流进行了标准化，同时支持冒泡型事件流和捕获型事件流。DOM 2.0标准规定捕获型事件流先进行响应，然后才响应冒泡型事件流。这两种事件流会触及DOM中的所有对象，从document对象开始，最后在document对象结束。

不过大部分浏览器在支持DOM标准事件流时，会影响window对象。例如，针对上面的示例，在兼容DOM标准的浏览器中单击段落文本，事件流会按如图6.5所示的过程进行传导。

在默认情况下，事件使用冒泡型事件流，开发者可以显式设置并使用捕获型事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。除了元素能够响应事件外，DOM标准还规定文本节点也可以响应事件，但IE并不支持响应事件。