JavaScript 事件处理
用户可以通过多种方式与浏览器中的页面进行交互，而事件是交互的桥梁。Web 应用程序开发人员通过JavaScript 脚本内置的和自定义的事件处理器来响应用户的动作，就可以开发出更具交互性、动态性的页面。
什么是事件
JavaScript 脚本中的事件是指用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应。
事件处理器是与特定的文本和特定的事件相联系的 JavaScript 脚本代码，当该文本发生改变或者事件被触发时，浏览器执行该代码并进行相应的处理操作，而响应某个事件而进行的处理过程称为事件处理。
JavaScript 脚本中的事件并不限于用户的页面动作如MouseMove、Click 等，还包括浏览器的状态改变，如在绝大多数浏览器获得支持的Load、Resize 事件等
浏览器响应用户的动作，如鼠标单击按钮、链接等，并通过默认的系统事件与该动作相关联，但用户可以编写自己的脚本，来改变该动作的默认事件处理器
现代事件模型中引入 Event 对象，它包含其它对象使用的常量和方法的集合。当事件发生后，产生临时的Event 对象实例，并附加当前事件的信息如鼠标定位、事件类型等，然后传递给相关的事件处理器进行处理。事件处理完毕后，该临时Event 对象实例所占据的内存空间被清理出来，浏览器等待其他事件的出现并进行处理。如果短时间内发生的事件较多，浏览器按事件按发生的顺序将这些事件排序，然后按照该顺序依次执行。
事件发生的场合很多，包括浏览器本身的状态改变和页面中的按钮、链接、图片、层等。同时根据DOM 模型，文本也可以作为对象，并响应相关动作，如鼠标双击、，文本被选择等。当然，事件的处理方法甚至于结果同浏览器环境有很大的关系，但总的来说，浏览器的版本越新，所支持的事件处理器就越多，支持也就越完善。基于此，在编写JavaScript 脚本时，要充分考虑浏览器的兼容性，以编写适合大多数浏览器的安全脚本。
HTML 文档事件
HTML 文档事件包括用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应，主要分为浏览器事件和HTML 元素事件两大类。
事件捆绑
HTML 文档将元素的常用事件（如onclick、onmouseover 等）当作属性捆绑在HTML元素上，当该元素的特定事件发生时，对应于此特定事件的事件处理器就被执行，并将处理结果返回给浏览器。事件捆绑导致特定的代码放置在其所处对象的事件处理器中。
浏览器事件
浏览器事件指载入文档直到该文档被关闭期间的浏览器事件，如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus 等。
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html140/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Sample Page!</title>
<script type="text/javascript">
<!--
window.onload = function ()
{
var msg="\nwindow.load 事件 : \n\n";
msg+=" 浏览器载入了文档!";
alert(msg);
}
window.onfocus = function ()
{
var msg="\nwindow.onfocus 事件 : \n\n";
msg+=" 浏览器取得了焦点!";
alert(msg);
}
window.onblur = function ()
{
var msg="\nwindow.onblur 事件 : \n\n";
msg+=" 浏览器失去了焦点!";
alert(msg);
}
window.onscroll = function ()
{
var msg="\nwindow.onscroll 事件 : \n\n";
msg+=" 用户拖动了滚动条!";
alert(msg);
}
window.onresize = function ()
{
var msg="\nwindow.onresize 事件 : \n\n";
msg+=" 用户改变了窗口尺寸!";
alert(msg);
}
//-->
</script>
</head>
<body>
<br>
<p>载入文档:</p>
<p>取得焦点:</p>
<p>失去焦点:</p>
<p>拖动滚动条:</p>
<p>变换尺寸:</p>
</body>
</html>
浏览器事件一般用于处理窗口定位、设置定时器或者根据用户喜好设定页面层次和内容等场合，在页面的交互性、动态性方面使用较为广泛。
HTML 元素事件
页面载入后，用户与页面的交互主要指发生在如按钮、链接、表单、图片等HTML 元素上的用户动作以及该页面对此动作所作出的响应。如简单的鼠标单击按钮事件，元素为button，事件为click，事件处理器为onclick()
JavaScript 定义的通用浏览器事件，HTML 文档中事件捆绑特性决定了脚本程序员可以将这些事件当作目标的属性，在使用过程中只需修改其属性值即可。
HTML 元素事件在表单提交、在线办公、防止网站文章被复制、禁止下载网页中图片等方面应用十分广泛，主要是能有效识别用户的动作并做出相应的反应，如返回警告框、执行window.close()方法关闭页面等操作。
IE 扩展的事件
IE 浏览器从IE4 版开始在更新其版本号的同时，逐步引入了一些事件用于捕捉更复杂的动作（如监视剪贴板等），主要用于文本、数据源操作等方面
JavaScript 如何处理事件
JavaScript 脚本处理事件主要可通过匿名函数、显式声明、手工触发等方式进行，这几种方法在隔离HTML 文本结构与逻辑关系的程度方面略为不同。
匿名函数
匿名函数的方式即使用Function 对象构造匿名的函数，并将其方法复制给事件，此时该匿名的函数成为该事件的事件处理器。
<form name=MyForm id=MyForm>
<input type=button name=MyButton id=MyButton value="事件测试">
</form>
document.MyForm.MyButton.οnclick=new Function()
{
alert("Your Have clicked me!");
}
显式声明
设置事件处理器时，也可不使用以上匿名函数，而是将该事件的处理器设置为已经存在的函数。
通过显式声明的方式定义事件的处理器代码紧凑、可读性强，且对显式声明的函数没有任何限制，还可将该函数作为其他事件的处理器。较之匿名函数的方式实用。
手工触发
手工触发事件的原理相当简单，就是通过其他元素的方法来触发一个事件而不需要通过用户的动作来触发该事件。
<form name="MyForm" id="MyForm">
<input type=button name=MyButton id=MyButton value="测试"
οnclick="document.all.MyPic.onmouseover();"
οnblur="document.all.MyPic.onmouseout();">
<form>
当事件在事实上已包含导致事件发生的方法时，该方法不会调用有问题的事件处理器，而会导致与该方法对应的行为立即发生。
事件处理器的返回值
事件通过给发送消息的方式来触发事件处理器对用户的动作做出相关响应来达到交互的目的，但此交互一般只是单方面的交互，即事件发送消息给事件处理器的过程，而不包括事件处理器将处理结果返回给事件的过程。事实上，事件处理器能将结果返回给事件，并由此影响事件的默认行为。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample Page!</title>
<script language="JavaScript" type="text/javascript">
function ch_input()
{
var msg="\n 系统提示信息 : \n\n";
if(document.all.MyForm.name.value=='')
{
msg+=" 您输入的用户名为空,请重新填写并确认! \n";
alert(msg);
document.all.MyForm.name.focus();
return false;
}
if(document.all.MyForm.password.value=='')
{
msg+=" 您输入的密码为空,请重新填写并确认! \n";
alert(msg);
document.all.MyForm.password.focus()
return false;
}
}
</script>
</head>
<body>
<center>
<form name=MyForm method="post" action="target.asp" οnsubmit=return(ch_input())>
用户:<input name="name" size="18" ><br>
密码:<input type="password" name="password" size="19"><br>
<input type="submit" value="提交" name="B1" >
<input type="reset" value="重置" name="B2" ></p></form>
</center>
</body>
</html>
程序运行后，若表单的“用户”字段为空，鼠标单击“提交”按钮后，将弹出“错误”警告框
在该警告框中单击“确定”按钮，浏览器返回原始页面，并将“用户”字段设置为当前的输入焦点。
若表单的“用户”字段非空，则继续判断“密码”字段。同样，若表单的“密码”字段为空，鼠标单击“提交”按钮后，将弹出“错误”警告框
在该警告框中单击“确定”按钮，浏览器返回原始页面，并将“密码用户”字段设置为当前的输入焦点。
该段代码中，当客户端单击页面默认的表单 submit 按钮即“提交”按钮后，使用下列语句触发表单submit 事件的处理器：
οnsubmit=return(ch_input())
事件处理器所对应的函数ch_input()根据页面表单各字段的情况判断：
if(document.all.MyForm.name.value=='')
{
msg+=" 您输入的用户名为空,请重新填写并确认! \n";
alert(msg);
document.all.MyForm.name.focus();
return false;
}
判断各字段时，如果该字段为空，则弹出警告框，用户单击“确认”按钮后，浏览器返回设置该字段为当前的输入焦点，并将布尔值false 作为结果返回给submit 事件；如果各字段都不为空，则将布尔值true 作为结果返回给submit 事件。
submit 事件接受返回的结果，如果返回的结果为true，浏览器将页面跳转到目标页面（本例中为target.asp）；如果返回的结果为false，则浏览器取消加载目标页面的动作，而继续将浏览器焦点定位在原始页面中。
在浏览器事件和 HTML 元素事件中，事件处理器的返回值将直接影响其下一步的动作。
现将常用的事件返回值与其导致的行为之间关系列表
事件处理器设置的灵活性
由于 HTML 将事件看成对象的属性，可以通过给该属性赋值的方式来改变事件的处理器，这给使用JavaScript 脚本来设置事件处理器带来了很大的灵活性。
IE4 和NN4 中新事件模型的事件传播方向
IE4 中的Event 对象
由于 IE4 中文档的每个元素都作为一个对象而存在，增加了事件发生的概率和可用的事件数目。当事件发生的时候，浏览器创建全局的Event 对象，并使它对于合适的事件处理器可用。
对象属性
IE4 中的Event 对象提供非常丰富的属性供脚本程序员调用，如事件发生的原始对象、相对位置等，其常见属性及其功能介绍
在 IE4 中，任何事件发生后生成的Event 对象对该文档而言是透明的，可将其看成是全局变量使用，即在文档任何地方都不需通过传入参数的方式来调用。该变量生成于其对应的事件发生之时，且在文档被浏览器关闭时对象所占据的内存空间被释放出来。
事件上溯
IE4 中的大部分事件会沿着关系树上溯（Bubble，也称冒泡），在继承关系的每一层如果存在合适的事件处理器则调用，不存在则继续上溯，直至上升到关系树的顶端或者被某个层所取消，但不支持上溯的事件仅能调用当前事件发生的原始对象那个层次上可用的事件处理器
某事件不能上溯，表明该事件只对当前发生事件的对象有效；某事件能取消表明可以通过设置其对应Event 对象的 cancelBuuble 属性为true 来阻止事件上溯到其上层对象。
阻止事件上溯
IE4 中的事件严格按照文档中元素对象的层次关系上溯而不管实际应用中是否需要将该事件上溯到对象关系中特定的层次。为达到在对象关系中指定层次中断事件上溯的目的，程序员可设置Event 对象的cancleBubble 属性为true 来实现。
事件改向
IE4 中事件严格按照文档中元素对象的层次关系上溯的特性，事件流的方向人为很难掌握，给程序员精确控制事件的流向带来不小的难度。IE5.5 引进了了对象的fireEvent()方法，该方法可以将当前事件传递到某个特定的对象上。
NN4 中的Event 对象
与 IE4 相同，NN4 中发生事件时，浏览器创建Event 对象，并将其传递给事件处理器使用，但两者创建的Event 对象在很多方面存在很大的差异，如对象实例的传递、作用范围、事件的流向等
对象属性
NN4 中的Event 对象提供较为简单的属性供程序员使用，如事件发生的原始对象、相对位置等，其常见属性及其功能介绍
事件捕获
NN4 中没有事件上溯的概念，与此功能相类似的是事件捕获。事件捕获使window、document、layer 对象能捕获窗口、文档和层中低层次对象的事件。如document 对象能捕获发生在文档页面中的事件如鼠标单击某文本段等，并将此事件交给该层的事件处理器处理。事件捕获对于处理事件或者在更高的层次上定义事件处理器来取代低层次的多个事件处理器是非常有用的，典型的如表单的提交等。
关闭事件捕获
IE4 中通过设置Event 对象的cancleBubble 属性为true 来阻止事件的上溯，而NN4 中则通过内置的releaseEvent()方法来将某层次上的特定事件设置为不捕获。该方法语法如下：
object.releaseEvent(arg);
其中arg 为要设置为不捕获的目标事件列表
事件传递
NN4 中事件流的流向与IE4 中正好相反，是从对象继承关系中较高层次的对象如window、document 到较低层次的对象如标记<p>、<b>等。同时较高层次上的事件处理器往往比较低层次上的处理器触发的机会更大。
DOM 的解决之道
事件流方向
在事件流的方向问题上，DOM2 综合了IE4 和NN4 的事件回溯和下传的做法：
事件下传阶段：该过程模仿 NN4 中事件流的流动过程，事件从继承关系的顶端开始搜索，直到到达目标对象为止。事件在下传过程中，可被当前的事件处理器先处理或者改向。一旦到达目标对象，该事件的处理器立即被触发。
事件上溯过程：事件到达目标对象之后，将模仿IE4 中事件流的流动过程，沿着继承关系上溯至顶端，在上溯的过程中调用每一层相应的事件处理器。
事件上溯过程并不是必须的，只有当程序员在该事件下传过程中以 NN4 的方式显示捕获过此事件时，事件上溯过程才发生。
在事件下传和上溯过程中，DOM2 引入了“事件监听器”概念对事件处理器和对象进行捆绑。事件监听器本质上也是一种事件处理器，只不过它被绑定在对象继承关系的特定节
点上，并可在事件生命周期的特定阶段被触发。DOM2 使用节点的addEventListener()方法和deleteEventListener()方法分别对事件监听器进行绑定和删除。
在事件的流动过程中，DOM2 提供节点的dispatchEvent()方法来将当前事件改向，该方法以当前Event 对象为参数。目标节点使用该方法后，变为新的事件节点，事件将按照正常的继承关系传递到其他的目标。
Event 对象
目标事件的属性与事件的类型紧密相关，并不是每个事件都能拥有Event 对象的全部属性。如键盘KeyPress 事件中就不可能拥有button 属性，鼠标的Click 事件就不拥有keyCode属性等
事件类型
DOM2 中定义的基本事件及其特性
DOM2 中UI事件及其特性
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
