jQuery的unbind()函数详解

最新推荐文章于 2023-07-27 10:01:41 发布

简单DE生活

最新推荐文章于 2023-07-27 10:01:41 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/zhangliangaries/article/details/69942314

版权

jQuery的绑定事件非常方便，有bind、unbind、live、one,还有它帮你把一些常用的事件给单独了出来，比如控件的onclick事件，我们绑定onclick事件的时候只需要

 
   1$("#testButton").click(function() { 
 
   2alert("I'm Test Button"); 
 
    如果我们要取消绑定的事件?jQuery有unbind的方法，专门用来取消绑定的事件

`1`	`$("#testButton").unbind("click");`

是不是很简单？如果你的click有2个事件的话，你还可以使用unbind("click", fnName)来删除特定函数的绑定。

为什么有这个取消特定函数的方法呢，我们来看下例子，我们会发现，javaScript的事件，跟C#的事件一样,事件的绑定是叠加（+=）而不是覆盖。

 
   01var Eat = function() { 
 
   02alert("我要吃饭"); 
 
   03} 
 
   04var PayMoney = function() { 
 
   05alert("先付钱"); 
 
   06} 
 
   07jQuery(document).ready(function() { 
 
   08$("#testButton").click(Eat); 
 
   09$("#testButton").bind("click", PayMoney); 
 
   10});

我们发现会先弹出：“我要吃饭”紧接着会弹出“先付钱”

要取消绑定特定函数的话:

`1`	`$("#testButton").unbind("click", PayMoney);`

注意,jQuery的unbind方法只能取消jquery bind()方法绑定的事件,

在jQuery的源码中我们可以看到$().click最后还是调用了$().bind("click")事件,所以只要是jQuery添加的事件,unbind就能解除事件绑定.对于这种原生JS添加的事件或者其他JS框架添加的事件,unbind就无能为力了

 
   1<input id="testButton" type="button" value="Test Button" onclick="Eat();" /> 
 
   2<script type="text/javascript"> 
 
   3jQuery(document).ready(function() { 
 
   4$("#testButton").unbind("click", Eat); 
 
   5$("#testButton").unbind(); 
 
   6$("#testButton").bind("click", PayMoney); 
 
   7}); 
 
   8</script>

大家猜猜，会显示什么？吃饭？付钱？答案是Eat -> PayMoney，啊！！！我这里取消了绑定，又删除了特定的绑定，为什么还会执行Eat呢？

仔细一看有个

 
   1onclick="Eat();"
 
    本文转自： 
   http://www.popo4j.com/article/jQuery-unbind.html 
  
jQuery如何重新绑定已经绑定的事件?虽然我们现在推荐行为分离,渐进增强,但在很多遗留系统里还是存在很多这样的代码
view source
print?
 
       1<input type="button" value="ClickMe" id="btn1" onclick="foo()" />
 
就是直接在DOM元素上绑定事件
这样做有很多缺点

1.代码高度耦合

2.增加HTML大小

3.书写不了逻辑性很强的代码
这种绑定事件的方法太丑陋了,我们看看jquery等框架是如何绑定事件的?
view source
print?
 
       1$("#btn1").click(function(){ 
 
       2foo(); 
 
       3});
 
当然在新系统里面我们可以直接绑定事件,但对于这种直接在elments上通过onclick(),onchange()来绑定事件的遗留的系统怎么办？

来看jquery如何巧妙的实现替换elements已绑定事件
view source
print?
 
       1("#btn1").unbind('click').removeAttr('onclick').click(function() { 
 
       2alert('The method has invoked by Jquery.'); 
 
       3});
 
我们分析下核心代码

我们先通过jQuery的unbind()方法解绑click事件,然后removeAttr(“onclick”),

就能把onclick属性给去掉了

然后通过jQuery的bind()或者直接click()来重新绑定我们的click事件