Javascript事件模型（三）：JavaScript事件绑定方法总结（及Jquery）

JavaScript中绑定事件的方法主要有三种：

1 在DOM元素中直接绑定

2 JavaScript代码中直接绑定

3 绑定事件监听函数

JQuery中绑定事件的几种方法

主要有on()、bind()、live()、delegate()等几种，相对应的解绑就是off()、unbind()、live()、undelegate();

1 on()、bind()、live()、delegate()中除了bind()，其他的都可以给后来追加的元素对象添加绑定事件。

2 比较推荐使用on的方式，对应解除绑定是off方法，在给动态添加的页面元素绑定事件时，on是比较好用的。这几种方法中各自有对应支持的JQuery版本。

一、在DOM元素中直接绑定

也就是直接在html标签中通过 onXXX=“” 来绑定。举个例子：

<div id="TableInTable">
<input id="TempletRow" type="button" value="模版行" onclick="TempletRow()" /><br />
<input id="DoCount" type="button" value="调试用" onclick="DoCount()" />
<input id="NestTable" type="button" value="调试用二" onclick="DoCount2()" /><br />
</div>

二、JavaScript代码中直接绑定

在JavaScript中通过查找DOM对象，对其绑定。

<input type="button" id="button" value="click"/>
<script type="text/javascript">
var v=document.getElementById("button");
v.onclick=function clickHandler(event){ 
alert(event.type);
}

也就是elementObject.onclick=function(){} 的格式。

三、绑定事件监听函数

这里需要了解addEventListener()和attachEvent()的函数语法。

1 elementObject.addEventListener(eventName,handle,useCapture) （支持主流浏览器、以及IE9.0及以上）

eventName:要绑定的事件名称。注意写法，比如点击事件，写成click,而不是onclick.

handle: 处理事件的函数名。但是写法上没有小括号。

useCapture:Boolean类型，是否使用捕获，一般用false，具体涉及到的会在后边总结。

2 elementObject.attachEvent(eventName,handle);（仅支持IE8及以下）

有一个兼容的好办法，相比较if...else语句，这个方法用的是try..catch错误处理语句，可以避免浏览器出现错误提示。

function addEvent(obj,type,handle){
   try{
     obj.addEventListener(type,handle,false);
   }catch(e){
     try{
       obj.attachEvent('on'+type,handle);
     }
     catch(e){
       obj['on' + type]=handle;//早期浏览器
     }
   }
}

以下是javascript事件列表

属性	当以下情况发生时，出现此事件
onabort	图像加载被中断
onblur	元素失去焦点
onchange	用户改变域的内容
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onerror	当加载文档或图像时发生某个错误
onfocus	元素获得焦点
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onload	某个页面或图像被完成加载
onmousedown	某个鼠标按键被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标被移到某元素之上
onmouseup	某个鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被调整尺寸
onselect	文本被选定
onsubmit	提交按钮被点击
onunload	用户退出页面