JavaScript事件处理机制与兼容性实现详解

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>