一、JavaScript點(diǎn)擊事件綁定方法

1.1 HTML onclick事件屬性

1 click me

1 functionclickMe(this) {2 alert("click me");3 }

1.2 JavaScript onclick事件

1 click me

1 document.getElementById("button").οnclick=clickMe;

1.3 IE4+

1 click me

1

2 alert("click me");3

1.4 IE5/windows attachEvent()方法

1 click me

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

1.5 W3C DOM addEventListener()方法

1 click me

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

二、jQuery點(diǎn)擊事件綁定方法

2.1 click事件綁定

2.1.1 將函數(shù)綁定到click事件

語(yǔ)法：

$(selector).click(function)

實(shí)例：

1 click me

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

2.1.2 觸發(fā)click事件

語(yǔ)法：

1 $(selector).click()

2.2?dblclick()方法

語(yǔ)法：

$(selector).dblclick(function)

實(shí)例：

1 click me

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

2.3 bind()方法?unbind()方法

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

語(yǔ)法(添加一個(gè)事件)：

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

語(yǔ)法(添加多個(gè)事件)：

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

實(shí)例：

1 click me

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

2.3.2 unbind()方法 取消綁定元素的事件處理程序和函數(shù)(可添加一個(gè)或多個(gè)事件，可傳遞額外數(shù)據(jù)到函數(shù))

語(yǔ)法(取消綁定一個(gè)事件)：

$(selector).unbind(event,function)

語(yǔ)法(取消綁定多個(gè)事件)：

$(selector).unbind(eventObj)

實(shí)例：

1 $("#button2_2").unbind();

2.4 live()方法 die()方法

2.4.1 live()方法?為被選元素附加一個(gè)或多個(gè)事件處理程序

語(yǔ)法：

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

實(shí)例：

1 click me

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

2.4.2 die()方法?移除所有通過(guò) live() 方法向指定元素添加的一個(gè)或多個(gè)事件處理程序

語(yǔ)法：

$(selector).die(event,function)

實(shí)例：

1 $("#button2_3").die();

2.5 delegate()方法 undelegate()方法

2.5.1 delegate()方法?為指定的元素(屬于被選元素的子元素)添加一個(gè)或多個(gè)事件處理程序

語(yǔ)法：

$(selector).delegate(childSelector,event,data,function)

實(shí)例：

1 click me

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

2.5.2 undelegate()方法?為指定的元素(屬于被選元素的子元素)添加一個(gè)或多個(gè)事件處理程序

語(yǔ)法：

$(selector).undelegate(selector,event,function)

實(shí)例：

1 $("#button2_4").undelegate();

2.6 on()方法 off()方法

2.6.1 on()方法?在被選元素及子元素上添加一個(gè)或多個(gè)事件處理程序

語(yǔ)法：

$(selector).on(event,childSelector,data,function,map)

實(shí)例：

1 click me

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

2.6.2 off()方法?通常用于移除通過(guò)?on()?方法添加的事件處理程序

語(yǔ)法：

$(selector).off(event,selector,function(eventObj),map)

實(shí)例：

1 $("#button2_5").off("click");

2.7 one()方法?每個(gè)元素只能運(yùn)行一次事件處理器函數(shù)

2.7.1 one()方法?為被選元素附加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)

語(yǔ)法：

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

實(shí)例：

1 click me

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

三、jQuery點(diǎn)擊事件綁定方法比較

jQuery點(diǎn)擊事件方法

適用jQuery版本

是否支持未來(lái)新添加元素的事件設(shè)置

click

適用所有版本

否

dblclick

適用所有版本

否

bind

適用所有版本，但是根據(jù)官網(wǎng)解釋，自從jquery1.7版本以后bind()函數(shù)推薦用on()來(lái)代替。

否

live

jquery1.9版本以下支持，jquery1.9及其以上版本刪除了此方法，jquery1.9以上版本用on()方法來(lái)代替。

是

delegate

jquery1.4.2及其以上版本。

是

on

jquery1.7及其以上版本；jquery1.7版本出現(xiàn)之后用于替代bind()，live()綁定事件方式。

是

one

適用jQuery1.0-jQuery3.1版本

總結(jié)

以上是生活随笔為你收集整理的jq父级绑定事件的意义_js、jq事件绑定方式总结——以click事件为例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。