异步编码—事件处理
在js里面，事件指的是什么
用户单击按钮、鼠标位置发生变化、通过网络收到数据、窗口大小发生变化、定时器到期、浏览器发生变化、用户提交了表单、知道用户按下了键盘按钮、知道元素获得了用户界面焦点、监视所有的鼠标移动、监视时钟并管理定时器和定时事件、获取网页所需的额外数据、跟踪用户缩放或滚动网页的操作、知道cookie已创建完毕、跟踪用户在网页上执行的所有单击操作，无论单击的是安妮、链接还是其他地方、知道网页已经加载并显示完毕。
事件处理程序是什么？
实际上即使一小段代码，知道事件发生时该如何做。从代码的角度说，处理程序就是一个函数。事件发生时，其处理程序函数将会被调用
新的代码组织方式
以响应事件的方式组织代码是另一种代码编写方式。要以这种方式编写代码，需要考虑的是可能发生的事件以及代码如何响应这些事件。在计算机科学种，通常说这种代码是异步。将各种事件的众多处理程序整合起来，构成一个应用程序
创建一个游戏来理解事件
理解事件的最佳方式是实践。
游戏描述
这个游戏是这样的：你加载一个网页，它显示一幅图像。这幅图像不是普通的图像，而是一幅非常模糊的图像。它的任务是猜出图像是什么，要核实你是否猜对了，可单击图像，让它不再模糊不清。当图像清晰几秒之后，重新变回模糊版本
实现游戏
浏览器加载html页面后，你将看到非常模糊的图像。为实现这个游戏，需要用户单击这副图像做出反映，将图像的清晰版本呈现出来。
我需要做的是：
- 访问DOM中的这个图像对象，并将其属性onclick设置为一个处理程序
- 在这个处理程序中编写代码，将图像的src属性从模糊图像改为清晰图像
确保这些代码在网页的DOM创建好之后再执行，为此，可使用windows对象的属性onload.将这些代码放在init中，并将属性onload设置这个函数。
1 window.onload=init;
function init(){ 2 var image=document.getElementById("zero"); 3 image.onclick=showAnswer;
}
要添加一个响应图像单击事件的处理函数，只需将一个函数赋给图像的属性onclick.下面将这个函数命名为showAnswer并定义它
function showAnswer(){ var image=document.getElementById("zero"); image.src="zero.jpg"; }
如果我们有一系列图像，我们先将它们添加到网页中，我们再添加五幅图像，这样网页将总共包含6副图像。我们还修改css，让图像之间有一定的间距。
<body> <img id="zero" src="../zeroblur.jpg"> <img id="one" src="../oneblur.jpg"> <img id="two" src="../twoblur.jpg"> <img id="three" src="../threeblur.jpg"> <img id="four" src="../fourblur.jpg"> <img id="five" src="../fiveblur.jpg"> <img id="six" src="../sixblur.jpg"> </body>
如何将同一个处理程序应用于所有图像
function init(){ var image=document.getElementsByTagName("img"); for(var i=0;i<image.length;i++){ image[i].onclick=showAnswer; }
使用getElementsByTagName，这个方法将一个标签名作为参数，并返回一个列表，其中包含所有匹配的元素
事件对象的工作原理：
单击事件程序被调用时，将向他传递一个事件对象。事实上，大多人文档对象模型事件发生的时候，都应向第项的处理程序传递一种事件对象。事件对象包含一些事件的常规信息。
事件对象所包含的的信息被称为eventObj，将会放在被调用的函数参数中。
1 function showAnswer(eventObj){ 2 var image=eventObj.target; 3 var name=image.id; 4 name="../"+name+".jpg"; 5 image.src=name; 6 7 }
DOM事件的事件对象包含的一些属性
当图像清晰几秒之后，重新变回模糊版本
1 function showAnswer(eventObj){ 2 var image=eventObj.target; 3 var name=image.id; 4 name="../"+name+".jpg"; 5 image.src=name; 6 7 setTimeout(reblur,2000,image); 8 } 9 function reblur(image){ 10 var name=image.id; 11 name="../"+name+"blur.jpg"; 12 image.src=name; 13 }
setTimeout第一个参数是处理程序，第二个参数是过多少毫秒之后调用事件处理程序，第三个参数是要重新变模糊的图像
