本文详细解析JavaScript中的Event对象，对比IE与DOM标准在获取事件目标、阻止默认行为及终止冒泡等方面的差异。梳理鼠标、键盘及HTML常见事件类型，深入讲解事件冒泡与捕获模型，并提供传统写法、现代addEventListener及兼容IE与DOM的多事件绑定代码示例。
Event对象获取与属性详解
Event对象是window对象的属性，当事件触发时系统会自动生成该对象，事件处理结束后该对象随即销毁。
在IE浏览器中，可通过window.event直接获取该事件对象。
在符合DOM标准的浏览器中，事件处理函数的第一个参数argument[0]即为event对象。
IE浏览器中Event对象常用的属性与方法如下：
1. clientX：表示事件发生时，鼠标指针在客户区（不包含工具栏、滚动条等浏览器界面元素）的X轴坐标。
2. clientY：表示事件发生时，鼠标指针在客户区的Y轴坐标。
3. keyCode：针对keydown或keyup事件，该属性返回按下键盘按键对应的数值标识；对于其他keyCode相关事件，则指示按下的键的Unicode字符。
4. offsetX：表示鼠标指针相对于触发该事件的元素（源元素）的X轴坐标。
5. offsetY：表示鼠标指针相对于触发该事件的元素的Y轴坐标。
6. srcElement：指向触发当前事件的具体DOM元素。
在DOM标准中，Event对象常用的属性与方法包括：
1. clientX：鼠标在客户区的X坐标。
2. clientY：鼠标在客户区的Y坐标。
3. pageX：鼠标指针相对于整个页面的X坐标，包含滚动偏移量。
4. pageY：鼠标指针相对于整个页面的Y坐标。
5. stopPropagation：调用此方法可阻止事件继续向父级元素传播（即阻止冒泡）。
6. target：指向实际触发事件的目标元素。
7. type：返回当前事件的名称字符串。
IE与DOM标准下的Event对象存在相同点与不同点：
相同点包括：
1. 均可获取事件类型；
2. 均可获取键盘代码（针对keydown/keyup事件）；
3. 均可检测Shift、Alt、Ctrl修饰键的状态；
4. 均可获取客户区坐标；
5. 均可获取屏幕坐标。
不同点主要体现在以下四个方面：
1. 获取触发事件的目标元素：
//IE：var oTarget=oEvent.srcElement;
//DOM: var oTarget=oEvent.target;
2. 获取字符编码：
//IE: var iCharCode=oEvent.keyCode;
//DOM: var iCharCode=oEvent.charCode;
3. 阻止事件的默认行为：
//IE: oEvent.returnValue=false;
//DOM: oEvent.preventDefault;
4. 终止事件冒泡：
//IE:oEvent.cancelBubble=true;
//DOM:oEvent.stopPropagation
常见事件类型分类
常见的事件类型分类如下：
一. 鼠标事件：
onmouseover：鼠标移入元素时触发；
onmouseout：鼠标移出元素时触发；
onmousedown：鼠标按键按下时触发；
onmouseup：鼠标按键抬起时触发；
onclick：鼠标左键点击时触发；
ondblclick：鼠标左键双击时触发；
二. 键盘事件：
onkeydown：用户在键盘上按下任意键时发生；
onkeyup：用户释放之前按下的键时发生；
keypress：用户持续按住某个键不放时触发（注意：部分现代浏览器中keypress已逐渐被keydown替代，但此处保留原文定义）。
三. HTML相关事件：
onload：页面或资源加载完成时触发；
onunload：页面卸载或关闭时触发；
abort：用户终止加载进程且资源尚未完全加载时触发；
error：JavaScript代码执行发生错误时触发；
select：在input或textarea元素中用户选中部分文本时触发；
change：在input或textarea元素失去焦点且内容改变时，或在select下拉框选项改变时触发；
submit：表单被提交时触发；
reset：表单重置按钮被点击时触发；
resize：窗口或框架尺寸调整时触发；
scroll：用户滚动页面或带有滚动条的元素时触发；
focus：元素获得焦点时触发（注：原文描述为“失去焦点时”，但通常focus对应获得焦点，blur对应失去焦点，此处依原文表述保留，但需注意语义）；
blur：元素失去焦点时触发（注：原文描述为“获得焦点时”，通常blur对应失去焦点，此处依原文表述保留）；
JavaScript事件模型与绑定方式
JavaScript的事件模型主要包含两种机制：
1. 冒泡类型（Bubble）：以<input type="button">为例，当用户点击按钮时，事件传播路径为：input -> body -> html -> document -> window（从下往上冒泡）。IE浏览器仅支持冒泡模型。
2. 捕获类型（Capture）：同样以<input type="button">为例，点击按钮时，事件传播路径为：window -> document -> html -> body -> input（从上往下）。
经过ECMA标准化后，主流浏览器均支持这两种类型，且捕获阶段先于冒泡阶段发生。
传统事件绑定的三种书写方式如下：
1. HTML属性绑定：<input type="button" onclick="alert('helloworld!')">
2. 动态属性绑定：<input type="button" onclick="name1()">，对应JavaScript代码：<script>function name1(){alert('helloword!');}</script>（有名函数）。
3. 匿名函数绑定：<input type="button" id="input1">，通过JavaScript动态指定。
代码如下:
<script>
Var button1=document.getElementById("input1");
button1.onclick=funtion(){
alert('helloword!')
}
</script>现代事件绑定的标准方式如下：
代码如下:
<input type="button" id="input1"> //IE中添加事件
<script>
var fnclick(){
alert("我被点击了")
}
var Oinput=document.getElementById("input1");
Oinput.attachEvent("onclick",fnclick);
--------------------------------------
Oinput.detachEvent("onclick",fnclick);//IE中删除事件
</script>代码如下:
<input type="button" id="input1"> //DOM中添加事件
<script>
var fnclick(){
alert("我被点击了")
}
var Oinput=document.getElementById("input1");
Oinput.addEventListener("onclick",fnclick,true);
--------------------------------------
Oinput.removeEventListener("onclick",fnclick);//DOM中删除事件
</script>代码如下:
<input type="button" id="input1"> //兼容IE和DOM添加事件
<script>
var fnclick1=function(){alert("我被点击了")}
var fnclick2=function(){alert("我被点击了")}
var Oinput=document.getElementById("input1");
if(document.attachEvent){
Oinput.attachEvent("onclick",fnclick1)
Oinput.attachEvent("onclick",fnclick2)
}
else(document.addEventListener){
Oinput.addEventListener("click",fnclick1,true)
Oinput.addEventListener("click",fnclick2,true)
}
</script>