一、JavaScript点击事件绑定方法
1.1 HTML onclick事件属性
1 <button onclick="clickMe(this)">click me</button>
1 function clickMe(this) { 2 alert("click me"); 3 }
1.2 JavaScript onclick事件
1 <button id="button">click me</button>
1 document.getElementById("button").onclick=clickMe;
1.3 IE4+<script for>
1 <button id="button1">click me</button>
1 <script for="button1" event="onclick"> 2 alert("click me"); 3 </script>
1.4 IE5/windows attachEvent()方法
1 <button id="button2">click me</button>
1 document.getElementById("button2").attachEvent("onclick",clickMe);
1.5 W3C DOM addEventListener()方法
1 <button id="button3">click me</button>
1 document.getElementById("button3").addEventListener("click",clickMe);
二、jQuery点击事件绑定方法
2.1 click事件绑定
2.1.1 将函数绑定到click事件
语法：
$(selector).click(function)
实例：
1 <button id="button2_1">click me</button>
1 $("#button2_1").click(function(e){ 2 alert(e); 3 });
2.1.2 触发click事件
语法：
1 $(selector).click()
2.2 dblclick()方法
语法：
$(selector).dblclick(function)
实例：
1 <button id="button2_7">click me</button>
1 $("#button2_7").dblclick(function(e) { 2 alert(e); 3 });
2.3 bind()方法 unbind()方法
2.3.1 bind()方法 将事件和函数绑定到元素(可添加一个或多个事件，可传递额外数据到函数)
语法（添加一个事件）：
$(selector).bind(event,data,function)
语法（添加多个事件）：
$(selector).bind({event:function, event:function, ...})
实例：
1 <button id="button2_2">click me</button>
1 $("#button2_2").bind("click", function(e) { 2 alert(e); 3 });
2.3.2 unbind()方法 取消绑定元素的事件处理程序和函数(可添加一个或多个事件，可传递额外数据到函数)
语法（取消绑定一个事件）：
$(selector).unbind(event,function)
语法（取消绑定多个事件）：
$(selector).unbind(eventObj)
实例：
1 $("#button2_2").unbind();
2.4 live()方法 die()方法
2.4.1 live()方法 为被选元素附加一个或多个事件处理程序
语法：
$(selector).live(event,data,function)
实例：
1 <button id="button2_3">click me</button>
1 $("#button2_3").live("click", function(e) { 2 alert(e); 3 });
2.4.2 die()方法 移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序
语法：
$(selector).die(event,function)
实例：
1 $("#button2_3").die();
2.5 delegate()方法 undelegate()方法
2.5.1 delegate()方法 为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序
语法：
$(selector).delegate(childSelector,event,data,function)
实例：
1 <button id="button2_4">click me</button>
1 $("body").delegate("#button2_4", "click", function(e) { 2 alert(e); 3 });
2.5.2 undelegate()方法 为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序
语法：
$(selector).undelegate(selector,event,function)
实例：
1 $("#button2_4").undelegate();
2.6 on()方法 off()方法
2.6.1 on()方法 在被选元素及子元素上添加一个或多个事件处理程序
语法：
$(selector).on(event,childSelector,data,function,map)
实例：
1 <button id="button2_5">click me</button>
1 $("#button2_5").on("click", function(e) { 2 alert(e); 3 });
2.6.2 off()方法 通常用于移除通过 on() 方法添加的事件处理程序
语法：
$(selector).off(event,selector,function(eventObj),map)
实例：
1 $("#button2_5").off("click");
2.7 one()方法 每个元素只能运行一次事件处理器函数
2.7.1 one()方法 为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数
语法：
$(selector).one(event,data,function)
实例：
1 <button id="button2_6">click me</button>
1 $("#button2_6").one("click", function(e) { 2 alert(e); 3 });
三、jQuery点击事件绑定方法比较
|
jQuery点击事件方法 |
适用jQuery版本 | 是否支持未来新添加元素的事件设置 |
click |
适用所有版本 | 否 |
dblclick |
适用所有版本 | 否 |
bind |
适用所有版本，但是根据官网解释，自从jquery1.7版本以后bind()函数推荐用on()来代替。 | 否 |
live |
jquery1.9版本以下支持，jquery1.9及其以上版本删除了此方法，jquery1.9以上版本用on()方法来代替。 | 是 |
delegate |
jquery1.4.2及其以上版本。 | 是 |
on |
jquery1.7及其以上版本；jquery1.7版本出现之后用于替代bind()，live()绑定事件方式。 | 是 |
one |
适用jQuery1.0-jQuery3.1版本 |