一、事件驱动简介
在用户通过浏览器实行交互性体验中，事件驱动这一概念，就因此而来。要想弄明白事件驱动，首先得清楚什么是事件和什么是事件处理程序这两个问题。
浏览者通过鼠标或键盘执行的操作称为事件，对此事件做出响应的代码称为事件处理程序，事件的发生使得相应的事件处理程序被执行称为事件驱动。
二、事件的分类
除浏览者对键盘或鼠标的操作可引发事件之外，浏览器及网页内部的某些对象的状态发生变化时，也会引发事件。
一般将事件分为两种：用户事件和系统事件。
2.1用户事件
用户事件细分可以分为：鼠标事件、键盘事件
鼠标事件有：
onmousedown 鼠标按键被按下
onmouseup 鼠标按键被松开
onmouseover 鼠标移到某元素表面之上
onmouseout 鼠标从某元素表面移开
onmousemove 鼠标在某元素表面持续移动
onclick 鼠标单击某元素
ondblclick 鼠标双击某元素
键盘事件有：
onkeydown 键盘按键被按下
onkeyup 键盘按键被松开
onkeypress 键盘按键被按下并松开
2.2系统事件
系统事件可以细分为：window对象事件、Form对象事件、焦点事件、数据变更事件等
window对象事件有：
onload 浏览器加载一个网页文档或一个图像完成时
onunload 浏览器卸载一个网页文档时
onresize 浏览器窗口或框架的尺寸发生变化时
onscroll 浏览器窗口或框架中的网页发生滚动时
Form对象事件有：
onsubmit表单提交时
onreset 表单重置时
焦点事件有：
onfocus界面元素获得焦点时
onblur 界面元素失去焦点时
数据变更事件有：
onchange 表单中的文本元素内容发生变化时或列表框发生选项切换时
三 、事件处理程序
事件处理程序即对事件的响应代码。可以是一行或几行脚本语句，如果代码量较大，则应用自定义函数包装这些脚本代码。
3.1事件与事件处理程序的关联方式
一共有三种：
一是通过标签的事件属性
二是通过对象的事件属性
三是attachEvent或addEventListener
3.1.1标签的事件属性示例：
function body_load(){
alert("body标签的onload属性 .页面加载");
}
<body οnlοad="body_load();"></body>
alert("body标签的onload属性 .页面加载");
}
<body οnlοad="body_load();"></body>
onload方法是加载时触发该动作，上面代码的含义是在页面加载body标签时调用javascript的body_load()方法，而该方法运行结果是弹出一个警告对话框，消息内容为
body标签的onload属性 .页面加载。
3.1.2对象的事件属性示例：
<script>
对象.事件属性 = 事件处理程序;
</script>
对象.事件属性 = 事件处理程序;
</script>
function window_resize(){
alert("Window对象的onresize事件.窗口尺寸变化");
}
window.onresize = window_resize;
alert("Window对象的onresize事件.窗口尺寸变化");
}
window.onresize = window_resize;
以上javascript代码的含义是：浏览器窗口尺寸发生变化时，执行window_resize方法体中的事件处理程序代码。
3.1.3attachEvent或addEventListener
//清空id为txt_1的标签中文本的内容
function clearText() {
document.getElementById("txt_1").value = "";
}
function bindEventHandler() {
if(document.all) {
document.getElementById("btn_2").attachEvent("onclick" ,clearText);
} else {
document.getElementById("btn_2").addEventListener("click" , clearText , false);
}
document.getElementById("btn_2").value="已经为click事件绑定了事件处理程序";
}
<form >
<input type="button" id="btn_1" name="btn" value="点击" οnclick="bindEventHandler();"/>
<input type="button" id="btn_2" name="btn" value="暂时没有事件处理程序" />
<input type="text" id="txt_1" name="txt" value="默认文本" />
</form>
document.getElementById("txt_1").value = "";
}
function bindEventHandler() {
if(document.all) {
document.getElementById("btn_2").attachEvent("onclick" ,clearText);
} else {
document.getElementById("btn_2").addEventListener("click" , clearText , false);
}
document.getElementById("btn_2").value="已经为click事件绑定了事件处理程序";
}
<form >
<input type="button" id="btn_1" name="btn" value="点击" οnclick="bindEventHandler();"/>
<input type="button" id="btn_2" name="btn" value="暂时没有事件处理程序" />
<input type="text" id="txt_1" name="txt" value="默认文本" />
</form>
标签对象.attachEvent("事件名",事件处理程序);
标签对象.
addEventListener("click" , clearText , false);含义是为该标签绑定点击事件，当点击时执行clearText方法
四、事件对象
事件发生时，可能需要获得与此事件相关的信息，比如鼠标事件发生时鼠标的坐标，键盘事件发生是哪个键引起的，事件发生在哪个对象上等等。这些与事件的状态相关的信息可以Event事件对象获得。
注意：要获得Event事件对象，可以在事件处理程序中访问Window对象的event属性，即window.event ，但这种方式仅适用于IE浏览器。在面向其他浏览器的代码中，应向事件处理函数传递event实参，这样在事件处理函数中可用形参表示Event对象。
4.1事件对象的获取示例
<html>
<head>
<script>
function fun(evt)
{
//[事件处理程序，在这里可用形参evt表示Event事件对象]
alert('evt.button返回当事件被触发时，哪个鼠标按钮被点击:' + evt.button);
alert(' evt.clientX返回当事件被触发时，鼠标指针相对于页面正文的水平坐标:' + evt.clientX);
alert('evt.clientY返回当事件被触发时，鼠标指针相对于页面正文的垂直坐标:'+evt.clientY);
alert('evt.screenX返回当事件被触发时，鼠标指针相对于页面正文的垂直坐标:'+evt.screenX);
alert('evt.screenY返回当事件被触发时，鼠标指针相对于页面正文的垂直坐标:'+evt.screenY);
alert('evt.ctrlKey返回当事件被触发时，"CTRL" 键是否被按下:'+evt.ctrlKey);
alert('evt.shiftKey返回当事件被触发时，"SHIFT" 键是否被按下:'+evt.shiftKey);
alert('evt.altKey返回当事件被触发时，"ALT" 键是否被按下:'+evt.altKey);
alert('evt.type返回事件的类型:'+evt.type);
alert('evt.keyCode返回键的虚拟键盘代码或此键的字符的Unicode码。:'+evt.keyCode);}
</script>
</head>
<body>
<input type="button" id="btn" value="点我" οnclick="fun(event);"/>
</body>
</html>
<head>
<script>
function fun(evt)
{
//[事件处理程序，在这里可用形参evt表示Event事件对象]
alert('evt.button返回当事件被触发时，哪个鼠标按钮被点击:' + evt.button);
alert(' evt.clientX返回当事件被触发时，鼠标指针相对于页面正文的水平坐标:' + evt.clientX);
alert('evt.clientY返回当事件被触发时，鼠标指针相对于页面正文的垂直坐标:'+evt.clientY);
alert('evt.screenX返回当事件被触发时，鼠标指针相对于页面正文的垂直坐标:'+evt.screenX);
alert('evt.screenY返回当事件被触发时，鼠标指针相对于页面正文的垂直坐标:'+evt.screenY);
alert('evt.ctrlKey返回当事件被触发时，"CTRL" 键是否被按下:'+evt.ctrlKey);
alert('evt.shiftKey返回当事件被触发时，"SHIFT" 键是否被按下:'+evt.shiftKey);
alert('evt.altKey返回当事件被触发时，"ALT" 键是否被按下:'+evt.altKey);
alert('evt.type返回事件的类型:'+evt.type);
alert('evt.keyCode返回键的虚拟键盘代码或此键的字符的Unicode码。:'+evt.keyCode);}
</script>
</head>
<body>
<input type="button" id="btn" value="点我" οnclick="fun(event);"/>
</body>
</html>
4.2事件对象的属性
button
返回当事件被触发时，哪个鼠标按钮被点击。
clientX 返回当事件被触发时，鼠标指针相对于页面正文的水平坐标。
clientY 返回当事件被触发时，鼠标指针相对于页面正文的垂直坐标。
screenX 返回当某个事件被触发时，鼠标指针相对于屏幕的水平坐标。
screenY 返回当某个事件被触发时，鼠标指针相对于屏幕的垂直坐标。
ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。
shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。
altKey 返回当事件被触发时，"ALT" 是否被按下。
type 返回事件的类型。
keyCode 返回键的虚拟键盘代码或此键的字符的Unicode码。
clientX 返回当事件被触发时，鼠标指针相对于页面正文的水平坐标。
clientY 返回当事件被触发时，鼠标指针相对于页面正文的垂直坐标。
screenX 返回当某个事件被触发时，鼠标指针相对于屏幕的水平坐标。
screenY 返回当某个事件被触发时，鼠标指针相对于屏幕的垂直坐标。
ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。
shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。
altKey 返回当事件被触发时，"ALT" 是否被按下。
type 返回事件的类型。
keyCode 返回键的虚拟键盘代码或此键的字符的Unicode码。
4.3事件源的获取
在事件处理程序中可能想要获得对事件源的引用，即事件是由哪个对象引发的。
可以使用事件对象的srcElement属性访问事件源，但这只适用于IE浏览器。
其他浏览器中可使用target属性代替。
可以使用事件对象的srcElement属性访问事件源，但这只适用于IE浏览器。
其他浏览器中可使用target属性代替。
事件源的获取示例：
function doclick(event) {
var targetElement;
if(document.all) {
targetElement = event.srcElement;
} else {
targetElement = event.target;
}
alert(targetElement.value);
}
<form >
<input type="button" name="btnA" id="btn_1" value="按钮A" οnclick="doclick(event);"/>
<input type="button" name="btnB" id="btn_2" value="按钮B" οnclick="doclick(event);"/>
</form>
var targetElement;
if(document.all) {
targetElement = event.srcElement;
} else {
targetElement = event.target;
}
alert(targetElement.value);
}
<form >
<input type="button" name="btnA" id="btn_1" value="按钮A" οnclick="doclick(event);"/>
<input type="button" name="btnB" id="btn_2" value="按钮B" οnclick="doclick(event);"/>
</form>
4.4阻止事件的默认动作
事件处理程序还阻止浏览器执行此事件发生后的默认动作。
在IE浏览器中，可以为事件对象的returnValue属性赋值为false实现这一目标，
而在其他浏览器中则要调用事件对象的preventDefult()方法。
在IE浏览器中，可以为事件对象的returnValue属性赋值为false实现这一目标，
而在其他浏览器中则要调用事件对象的preventDefult()方法。
五、典型应用
5.1跟随滚动条移动的广告
5.2表单数据有效性验证
5.3即时显示验证失败的错误消息
5.4列表框级联
六、小结
事件驱动在实现界面编程时常采用的编程机制，简单地说就是：事件的引发导致事件处理程序执行。
用户事件是指浏览者通过鼠标或键盘操作界面元素引发的事件。
系统事件是指浏览器对象和网页元素对象的状态发生变化而引发的事件。
事件与事件处理程序的关联方式有三种：
1、在标签中为事件属性赋值，
2、在<script></script>脚本块中为对象的事件属性赋值此，
3、使用attachEvent方法或addEventListener()方法绑定。
事件对象提供与每一次事件相关的信息。如事件的类型，返回值，光标的位置，哪个键引发等。
1530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
