亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jquery中click等事件綁定及移除的幾種方法小結(jié)

 更新時(shí)間:2024年01月25日 23:40:42   投稿:mdxy-dxy  
這篇文章主要介紹了jquery中綁定事件與解綁事件是常用到的寫法,這里總結(jié)了幾種常見的綁定事件與解綁事件的方法,需要的朋友可以參考下

綁定click事件

一:直接在html標(biāo)簽里添加事件

HTML元素行間事件(這種寫法是JavaScript原生事件)

<input id="btn" type="button" value="點(diǎn)我" onclick="test();" />
<script>
	function test() {
	    alert("行間事件");
	}
</script>

缺點(diǎn):html與js緊密耦合

二:使用jq的click方法綁定

$("#btn").click(function(){
     alert("jquery使用click綁定事件");
})

三:使用jq的bind方法綁定

$("#btn").bind("click",function(){
   alert("jquery使用bind綁定事件");
})

四:使用jq的on方法綁定

$("#btn").on("click",function(){
    alert("jquery使用on綁定事件");
})

五:使用jq的可綁定動(dòng)態(tài)元素的on方法綁定

 $("body").on("click","#btn", function () {
      alert("jquery使用on可綁定動(dòng)態(tài)元素事件");
 })

點(diǎn)擊按鈕,這五個(gè)事件都會(huì)執(zhí)行,執(zhí)行順序:1>2=3=4>5
其中行間事件onclick這種寫法的事件最先觸發(fā),其次是監(jiān)聽事件click方法綁定,這種寫法和寫法三的on方法、方法四的bind方法是相同的,他們?nèi)唛g的順序取決于代碼的順序,誰在前那么誰就先綁定,方法五也是使用了on方法,但是這種寫法可以給動(dòng)態(tài)元素綁定事件,比如我們通過發(fā)送服務(wù)器請(qǐng)求動(dòng)態(tài)加載到頁面的元素,加載后的元素默認(rèn)是沒有綁定事件的,但是使用方法五可以成功為這種動(dòng)態(tài)元素綁定事件,這種寫法其實(shí)是發(fā)生的事件委托,監(jiān)聽父元素body,然后代替子元素執(zhí)行click事件,所以是執(zhí)行順序在前面四種后。

移除click事件

方式一的移除:

<input id="btn" type="button" value="點(diǎn)我" onclick="test();" />
function test() {
    alert("行間事件");
}

這種寫法其實(shí)可以理解為:

<input id="btn" type="button" value="點(diǎn)我" />
/*點(diǎn)擊的時(shí)候執(zhí)行函數(shù)*/
document.getElementById("btn").onclick = test;
/*定義函數(shù)*/
function test() {
    alert("行間事件");
}

一句話搞定

那么移除事件就很簡(jiǎn)單了,一句代碼搞定:

document.getElementById("btn").onclick = null;

或者使用jq的方法移除

$("#btn").prop("onclick",null);

$("#jb51").removeAttr("onclick"); 
$('.ul_Address li a').removeAttr("onclick"); 

若使用多種寫法綁定多個(gè)click事件則移除所有的click事件:

 $("#btn").prop("onclick",null).off("click");

寫法二、三、四的移除:

$("#btn").on("click",function(){
	alert("jquery使用on綁定事件");
})
$("#btn").click(function(){
	alert("jquery使用click綁定事件");
})
$("#btn").bind("click",function(){
	alert("jquery使用bind綁定事件");
})

直接使用unbind方法

$("#btn").unbind("click");

使用off方法

$("#btn").off("click");

寫法五使用on綁定動(dòng)態(tài)元素的移除:

這種寫法使用unbind無效,因?yàn)樗壎ǖ膶?duì)象是父元素body,那么需要用配對(duì)的函數(shù)off移除

$("body").off("click","#btn");

需要注意的是:事件委托寫法的解綁的元素需要與事件綁定的目標(biāo)元素一致(即案例中body,#btn需要一一對(duì)應(yīng)),否則不生效。
自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品;off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。使用起來更方便,推薦使用。

其中關(guān)于off函數(shù)的參數(shù)說明如下:

/*如果不傳參,會(huì)移除所有的事件*/
$("#btn").off();
/*如果傳遞一個(gè)參數(shù),會(huì)移除這個(gè)類型的所有事件*/
$("#btn").off('click');
/*如果傳遞兩個(gè)參數(shù),則移除這兩個(gè)參數(shù)指定的事件*/
$("#btn").off('click',test);

jQuery怎么刪除點(diǎn)擊事件?

要?jiǎng)h除一個(gè)元素的點(diǎn)擊事件,可以使用jQuery的off()方法,該方法用于解除元素綁定的事件。

以下是一個(gè)示例代碼,其中包括了如何添加點(diǎn)擊事件和如何刪除點(diǎn)擊事件:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>刪除點(diǎn)擊事件示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // 給按鈕綁定一個(gè)點(diǎn)擊事件
  $("#myBtn").on("click", function(){
    alert("Hello World!");
  });
  // 給刪除按鈕綁定一個(gè)點(diǎn)擊事件
  $("#deleteBtn").on("click", function(){
    // 解除按鈕的點(diǎn)擊事件
    $("#myBtn").off("click");
  });
});
</script>
</head>
<body>
<button id="myBtn">點(diǎn)擊我</button>
<button id="deleteBtn">刪除點(diǎn)擊事件</button>
</body>
</html>

在上面的代碼中,首先使用on()方法給按鈕綁定了一個(gè)點(diǎn)擊事件,當(dāng)用戶點(diǎn)擊按鈕時(shí),會(huì)彈出一個(gè)消息框。

然后,又使用on()方法給另一個(gè)按鈕綁定了一個(gè)點(diǎn)擊事件,當(dāng)用戶點(diǎn)擊這個(gè)按鈕時(shí),會(huì)解除之前按鈕的點(diǎn)擊事件,從而實(shí)現(xiàn)了刪除點(diǎn)擊事件的效果。

到此這篇關(guān)于jquery中click等事件綁定及移除的幾種方法小結(jié)的文章就介紹到這了,更多相關(guān)jqueryclick事件綁定及移除內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論