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事件列表