jquery中click事件綁定及移除的幾種方法總結

綁定事件與解綁事件是常用到的寫法，這里總結了幾種常見的綁定事件與解綁事件的方法。

綁定click事件

一：直接在html標簽里添加事件-----HTML元素行間事件(這種寫法是JavaScript原生事件)

<input id="btn" type="button" value="點我" onclick="test();" />

 

1.  
   function test() {
2.  
   alert( "行間事件");
3.  
   }

缺點：html與js緊密耦合

二：使用jq的click方法綁定

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

三：使用jq的bind方法綁定

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

四：使用jq的on方法綁定

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

五：使用jq的可綁定動態元素的on方法綁定

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

點擊按鈕，這五個事件都會執行，執行順序：1>2=3=4>5

其中行間事件onclick這種寫法的事件最先觸發，其次是監聽事件click方法綁定，這種寫法和寫法三的on方法、方法四的bind方法是相同的，他們三者間的順序取決於代碼的順序，誰在前那么誰就先綁定，方法五也是使用了on方法，但是這種寫法可以給動態元素綁定事件，比如我們通過發送服務器請求動態加載到頁面的元素，加載后的元素默認是沒有綁定事件的，但是使用方法五可以成功為這種動態元素綁定事件，這種寫法其實是發生的事件委托，監聽父元素body，然后代替子元素執行click事件,所以是執行順序在前面四種后

移除click事件

寫法一的移除：

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

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

1.  
   <input id= "btn" type= "button" value= "點我" />
2.  
   /*點擊的時候執行函數*/
3.  
   document.getElementById( "btn").onclick = test;
4.  
   /*定義函數*/
5.  
   function test() {
6.  
   alert( "行間事件");
7.  
   }

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

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

 

或者使用jq的方法移除：

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

 

若使用多種寫法綁定多個click事件則移除所有的click事件：

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

 

寫法二、三、四的移除：

1.  
   $( "#btn").on( "click", function(){
2.  
   alert( "jquery使用on綁定事件");
3.  
   })
4.  
   $( "#btn").click( function(){
5.  
   alert( "jquery使用click綁定事件");
6.  
   })
7.  
   $( "#btn").bind( "click", function(){
8.  
   alert( "jquery使用bind綁定事件");
9.  
   })

直接使用unbind方法

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

 

或者使用off方法：

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

 

寫法五使用on綁定動態元素的移除：

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

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

 

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

其中關於off函數的參數說明如下：

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

原文作者技術博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，愛閱讀，愛交友，將工作中遇到的問題記錄在這里，希望給每一個看到的你能帶來一點幫助。
歡迎留言交流。

---

click、bind、live等方法都已廢棄，改用on來綁定事件，off來解綁事件，更加簡潔高效。請讀者順應潮流。

 

 

 

 

 

轉自:https://blog.csdn.net/caicai1171523597/article/details/86643672