js、jq事件綁定方式總結——以click事件為例

一、JavaScript點擊事件綁定方法

1.1 HTML onclick事件屬性

<button onclick="clickMe(this)">click me</button>

function clickMe(this) {
    alert("click me");
}

1.2 JavaScript onclick事件

<button id="button">click me</button>

document.getElementById("button").onclick=clickMe;

1.3 IE4+<script for>

<button id="button1">click me</button>

<script for="button1" event="onclick">
    alert("click me");
</script>

1.4 IE5/windows attachEvent()方法

<button id="button2">click me</button>

document.getElementById("button2").attachEvent("onclick",clickMe);

1.5 W3C DOM addEventListener()方法

<button id="button3">click me</button>

document.getElementById("button3").addEventListener("click",clickMe);

二、jQuery點擊事件綁定方法

2.1 click事件綁定

2.1.1 將函數綁定到click事件

語法：

$(selector).click(function)

實例：

<button id="button2_1">click me</button>

$("#button2_1").click(function(e){
    alert(e);
});

2.1.2 觸發click事件

語法：

$(selector).click()

2.2 dblclick()方法

語法：

$(selector).dblclick(function)

實例：

<button id="button2_7">click me</button>

$("#button2_7").dblclick(function(e) {
    alert(e);
});

2.3 bind()方法 unbind()方法

2.3.1 bind()方法 將事件和函數綁定到元素(可添加一個或多個事件，可傳遞額外數據到函數)

語法（添加一個事件）：

$(selector).bind(event,data,function)

語法（添加多個事件）：

$(selector).bind({event:function, event:function, ...})

實例：

<button id="button2_2">click me</button>

$("#button2_2").bind("click", function(e) {
    alert(e);
});

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)

實例：

<button id="button2_3">click me</button>

$("#button2_3").live("click", function(e) {
    alert(e);
});

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)

實例：

<button id="button2_4">click me</button>

$("body").delegate("#button2_4", "click", function(e) {
    alert(e);
});

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)

實例：

<button id="button2_5">click me</button>

$("#button2_5").on("click", function(e) {
    alert(e);
});

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)

實例：

<button id="button2_6">click me</button>

$("#button2_6").one("click", function(e) {
    alert(e);
});

 三、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版本