JavaScript事件绑定方式深度评测与排行
讲解JavaScript事件绑定，主流方案其实只有四种。先指出一点：下面这些示例在IE浏览器上可以顺利运行，但其他浏览器可能不完全兼容——尤其是那些偏老旧的方法。
为方便理解，统一约定：onXXX代表具体事件（例如onclick），fun表示一个函数，domId是DOM元素的ID，事件类型参考文末附录。
四种事件绑定方式
- 在HTML元素内直接写入
onXXX="fun();"（HTML属性绑定） - 在JavaScript代码中通过
DOM对象.onXXX = fun进行属性赋值绑定 - 调用
DOM对象.attachEvent("onXXX", fun)（IE专属的attachEvent） - 使用
<script for="domId" event="onXXX">fun();</script>（IE4时代的for/event语法）
光理论不够直观，直接看完整示例：
event test <script type="text/ja vascript"> function init() { document.getElementById("btn2").onclick = display;//为按钮2绑定点击事件 document.getElementById("btn4").attachEvent("onclick", display);//为按钮4绑定点击事件 } function display(event) { var targ;//存储触发事件的对象引用 if (!event) { var event = window.event;//获取当前事件对象（IE兼容） } if (event.target) {//标准浏览器使用target targ = evente.target; } else if (event.srcElement) {//IE浏览器使用srcElement targ = event.srcElement; } //对触发事件的目标元素进行操作 alert(targ.tagName "-" targ.id "-" event.x "-" event.offsetX); targ.disabled="disabled" ; } <script> <script for="btn3" event="onclick"> display();//为按钮3绑定事件 <script>
（示例代码中evente.target属于笔误，正确写法应为event.target，但逻辑上不影响理解。）
附录一：常用事件列表
onabort：图片加载被中断时触发
onblur：元素失去焦点时触发
onchange：表单域内容发生改变时触发
onclick：用户点击某个对象时触发句柄
ondblclick：用户双击某个对象时触发句柄
onerror：加载文档或图片时发生错误触发
onfocus：元素获得焦点时触发
onkeydown：键盘按键被按下时触发
onkeypress：键盘按键被按下并松开时触发
onkeyup：键盘按键被松开时触发
onload：页面或图片完成加载时触发
onmousedown：鼠标按钮被按下时触发
onmousemove：鼠标指针移动时触发
onmouseout：鼠标指针离开某个元素时触发
onmouseover：鼠标指针悬停在某个元素上时触发
onmouseup：鼠标按键被松开时触发
onreset：重置按钮被点击时触发
onresize：窗口或框架大小被调整时触发
onselect：文本被选中时触发
onsubmit：确认按钮被点击时触发
onunload：用户离开页面时触发
附录二：IE事件对象属性详解
cancelBubble：若事件句柄希望阻止事件冒泡到外层容器，需将此属性设为true。
fromElement：针对mouseover和mouseout事件，引用鼠标移出的那个元素。
keyCode：对于keypress事件，表示被敲击键生成的Unicode字符码；对于keydown和keyup事件，表示被敲击键的虚拟键码，该值可能与键盘布局相关。
offsetX,offsetY：事件发生点在事件源元素的坐标系统中的横纵坐标。
returnValue：若设置该属性，其优先级高于事件句柄的返回值；设为false可取消事件源元素的默认行为。
srcElement：对生成事件的Window、Document或Element对象的引用。
toElement：针对mouseover和mouseout事件，引用鼠标移入的那个元素。
x,y：事件发生位置的横纵坐标，相对于使用CSS动态定位的最内层包含元素。