第四部分：JS事件
本部分将介绍JS中的事件，由于各种浏览器的事件不同，所以有分歧，故事件在不同浏览器中有不同的形式，本部分主要研究IE和火狐之下的事件差异。
1.事件的分类
（1）鼠标事件
①onclick事件：是指鼠标单击时触发的事件
②ondbclick事件：是指鼠标双击时触发的事件
③onmousemove事件：是指鼠标浮在控件上面时触发的事件，和onmouseover的主要区别在于：onmouseover事件只要鼠标一直浮在控件上面就一直触发这个事件
④onmousedown事件：是指按下鼠标时触发的事件 不论鼠标是否松开
⑤onmouseout事件：是指鼠标移出控件时所触发的事件
⑥onmouseover事件：是指当鼠标第一次进入控件上面时触发的事件，就只触发这一次，除非再一次进入
⑦onmouseup事件：是指当鼠标点击之后松开鼠标时触发的事件
（2）键盘事件
①onkeydown事件：是指键盘按下就出发的事件（不论你松不松开键盘），当这时为文本框赋值时，文本框里还没有值就出发了
②onkeypress事件：和onkeydown事件一样
③onkeyup事件：是指按下键盘松开键盘之后触发的事件
（3）接口事件
①blur：使失去焦点
②reset：使表单重置
③submit：使表单提交
2.事件的取消
（1）return false方式
（2）如果是IE浏览器，window.event.returnValue=false;
（3）如果是火狐浏览器：e.preventDefault();
例如: document.getElementById("txtTest").onkeydown = function (e) {
if (window.event) {
window.event.returnValue = false;
}
else {
e.preventDefault();
}
}
或者直接用return false;
3.事件的注册
如果要是一个控件想要绑定多个事件，每个都要绑定的话，很费事，所以JS给我们提供了一种方法，来为一个控件绑定多个事件。
（1）在IE下：element.attachEvent(“on+事件名", function () {……});
（2）在火狐下：element.addEventListener(“事件名”,function(){……},”bool值”),最后一个bool值是指： false是设置冒泡由里到外，true是由外到里
例如： if (window.attachEvent) {//判断是否支持attachEvent
document.getElementById("testDiv").attachEvent("onmousemove", function () { alert(123); });
}
else {
document.getElementById("testDiv").addEventListener("mousemove", function () { alert(123); },false);
}
4.事件的冒泡和取消
（1）在IE下：window.event. cancelBubble()=true;
（2）在火狐下：e. stopPropagation();
例如：
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
document.getElementById("outerDiv").onclick = function () {
alert("你点击了outerDiv");
}
document.getElementById("innerDiv").onclick = function (e) {
alert("你点击了innerDiv")
if (window.event) {
window.event.cancelBubble = true;
}
else {
e.stopPropagation();
}
}
}
</script>
</head>
<body>
<div id="outerDiv" style="width: 200px; height: 200px; background: green;">
<div id="innerDiv" style="width: 100px; height: 100px; background: red;">
</div>
</div>
</body>
</html>
注意：冒泡时：当你点击里面的div，外面div的点击事件也被触发，所以有时需要取消冒泡！
5. IE与火狐之间的区别总结
ff代表火狐浏览器。
（1）事件源
IE中：window.event.srcElement
ff中：e.target
（2）绑定事件
IE中：element.attachEvent(on+"事件名",function(e){……})
ff中：element.addEventListener(事件名(没有on),function(){},bool值) //false是设置冒泡 有里到外，true是由外到里
（3）取消事件
IE中： window.event.returnValue = false;
ff中：e.preventDefault();
（4）取消冒泡
IE中：window.event.cancelBubble=true;
ff中：e.stopPropagation();
（5）得到文本
IE中:element.innerText
ff中：element.textContent;
（6）取得键值
IE中： window.event.keyCode;
ff中： e.which;
