第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="http://www.mamicode.com/click me" onclick="alert(‘Clicked‘)"/>

由于这个值是JavaScript，因此不能在其中使用未经转义的HTML语法字符，例如&、""、<、>

HTML中定义的事件处理程序可以是具体动作，也可以调用在页面其他地方定义的脚本

<input type="button" value="http://www.mamicode.com/click me" onclick="showMessage()"/>

这样指定事件处理程序有一些独到之处，会创建一个封装着元素属性值的函数，这个函数中有一个局部变量event，也就是事件对象

<input type="button" value="http://www.mamicode.com/click me" onclick="alert(event.type)"/>

在这个函数内部，this的值等于事件的目标元素

<input type="button" value="http://www.mamicode.com/click me" onclick="alert(this.value)"/>

这个动态创建的函数，另一个有意思的地方是它扩展作用域的方式。在这个函数内部，可以像访问局部变量一样访问document及该元素本身的成员，这个函数使用with像下面这样扩展作用域：

function(){

　　with(document){

　　　　with(this){

　　　　　　//元素的属性值

　　　　　　}

　　　　}

　　}

事件处理程序访问自己的属性就简单多了

<input type="button" value="http://www.mamicode.com/click me" onclick="alert(value)"/>

如果当前元素是一个表单输入元素，则作用域中还会包含访问表单元素（父元素）的入口

function(){

　　with(document){

　　　　with(this.form){

　　　　　　with(this){

　　　　　　　　//元素的属性值

　　　　　　　　}

　　　　　　}

　　　　}

　　}

这样扩展作用域，事件处理程序无需引用表单元素就能访问其他表单字段

HTML中指定事件处理程序有两个缺点

事件处理程序未加载完毕就触发相应事件，会引发错误，将其封装在try-catch块中

<input type="button" value="http://www.mamicode.com/click me" onclick="try{showMessage();}catch(ex){}">

另一个缺点是，扩展事件处理程序的作用域在不同浏览器中会导致不同的结果，容易出错。

并且HTML与JavaScript代码耦合太过紧密不利于维护