第13章 事件
JavaScript与HTML之间的交互式通过事件来实现的。
事件流
事件流描述的是从页面中接收事件的顺序，IE和Netscape提出了完全相反的事件流概念，IE是事件冒泡流，Netscape是事件捕获流
事件冒泡
click一个<div>元素，click事件沿DOM树向上传播，在每一级节点都会发生，直至传播到document对象，现代浏览器则将事件冒泡到window对象
事件捕获
click一个<div>元素，click事件沿DOM树依次向下，直到传播到事件的实际目标，即<div>元素，IE9及其他浏览器都支持这种事件流模型，“DOM2级事件”规范要求事件从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的
由于老版本浏览器不支持，很少人使用事件捕获
DOM事件流
“DOM2级事件”规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段，即使“DOM2级事件”规范明确要求捕获阶段不会涉及事件目标，但IE9及其他现代浏览器都会在捕获阶段触发事件对象上的事件，结果就有2个机会在目标对象上面操作事件
IE8及之前版本不支持DOM事件流
事件处理程序
响应某个事件的函数就叫做事件处理程序（或事件侦听器），事件处理程序名字以“on”开头，click事件的事件处理程序就是onclick，load事件的事件处理程序就是onload
HTML事件处理程序
某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定，这个特性的值应该是能够执行的JavaScript代码：
<input type="button" value="click me" onclick="alert('Clicked')"/>
由于这个值是JavaScript，因此不能在其中使用未经转义的HTML语法字符，例如&、""、<、>
HTML中定义的事件处理程序可以是具体动作，也可以调用在页面其他地方定义的脚本
<input type="button" value="click me" onclick="showMessage()"/>
这样指定事件处理程序有一些独到之处，会创建一个封装着元素属性值的函数，这个函数中有一个局部变量event，也就是事件对象
<input type="button" value="click me" onclick="alert(event.type)"/>
在这个函数内部，this的值等于事件的目标元素
<input type="button" value="click me" onclick="alert(this.value)"/>
这个动态创建的函数，另一个有意思的地方是它扩展作用域的方式。在这个函数内部，可以像访问局部变量一样访问document及该元素本身的成员，这个函数使用with像下面这样扩展作用域：
function(){
with(document){
with(this){
//元素的属性值
}
}
}
事件处理程序访问自己的属性就简单多了
<input type="button" value="click me" onclick="alert(value)"/>
如果当前元素是一个表单输入元素，则作用域中还会包含访问表单元素（父元素）的入口
function(){
with(document){
with(this.form){
with(this){
//元素的属性值
}
}
}
}
这样扩展作用域，事件处理程序无需引用表单元素就能访问其他表单字段
HTML中指定事件处理程序有两个缺点
事件处理程序未加载完毕就触发相应事件，会引发错误，将其封装在try-catch块中
<input type="button" value="click me" onclick="try{showMessage();}catch(ex){}">
另一个缺点是，扩展事件处理程序的作用域在不同浏览器中会导致不同的结果，容易出错。
并且HTML与JavaScript代码耦合太过紧密不利于维护