欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

綁定click事件

一：直接在html標簽里添加事件

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

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

缺點：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的可綁定動態(tài)元素的on方法綁定

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

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

移除click事件

方式一的移除：

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

這種寫法其實可以理解為：

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

一句話搞定

那么移除事件就很簡單了,一句代碼搞定：

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

或者使用jq的方法移除

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

或

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

若使用多種寫法綁定多個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綁定動態(tài)元素的移除：

這種寫法使用unbind無效，因為它綁定的對象是父元素body，那么需要用配對的函數(shù)off移除

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

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

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

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

jQuery怎么刪除點擊事件？

要刪除一個元素的點擊事件，可以使用jQuery的off()方法，該方法用于解除元素綁定的事件。

以下是一個示例代碼，其中包括了如何添加點擊事件和如何刪除點擊事件：

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

在上面的代碼中，首先使用on()方法給按鈕綁定了一個點擊事件，當用戶點擊按鈕時，會彈出一個消息框。

然后，又使用on()方法給另一個按鈕綁定了一個點擊事件，當用戶點擊這個按鈕時，會解除之前按鈕的點擊事件，從而實現(xiàn)了刪除點擊事件的效果。

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

相關(guān)文章

最新評論