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