jQuery中的事件绑定和去除事件绑定

» 2010-09-26 71条评论

前天+昨天在折腾本博主题 zSnos-private 的  ajax(jQuery) 加载时碰到一个很郁闷的问题,就是不知道如何去除事件绑定,导致 ajax 请求数成倍增长,囧~

由于没有学过 js ,所以对这些东东不太了解,碰到问题没啥反应,在 Twitter 上请教了 js 高手 Qiqiboy,他说 js 的他会,但 jQuery 的不太了解。于是自己放狗搜……

找到一些资料,特贴此以备忘。

一、用bind()方法来对匹配元素进行特定事件的绑定

在文档装载完成后,使用bind()方法来对匹配元素进行特定事件的绑定,bing() 方法的调用格式为:

bind(type[,data],fn);

3个参数,说明如下

type:blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleaye、change、select、submit、keydown、keypress、keyup和error等,当然也可以是自定义名称。
data是可选参数:作为event.data属性值传递给事件对象的额外数据对象。
fn参数则是用来绑定的处理函数。

例子:点击侧边栏标题显示内容

html代码:

<div id="sidebar">
<h3>标题</h3>
<ul style="display:none"><li>I am zwwooooo.... </li></ul>
</div>

jQuery代码:

$(function(){
$("#sidebar h3").bind("click",function(){
$(this).next().show();
})
});

2010.9.27 ADD:平时我们写像 click、mouseover 和 mouseout 这类事件,因为在程序中经常会使用到,jQuery 为此提供了一套简写方法,如上面的jQuery代码可以写成:

$(function(){
$("#sidebar h3").click(function(){
$(this).next().show();
})
});

其实以前我们写的jQuery代码通常都是用这种简写模式。

二、移除之前的绑定事件

用$("#result").unbind("click")

如果你要移除所有的绑定事件,直接用 $("#result").unbind()

例题中用 $("#sidebar h3").unbind("click")

其实还是不太明白,但知道哪里需要用……好囧的学习方式~

EDIT: 由于没有系统学习过 js 和 jQuery,此文章的某些说法或许有些问题,有兴趣者请看#4楼 Qiqiboy 的评论和自行看jQuery的教程书。

另外:主题 zSnos-private 的 ajax 载入效果全部替换为新的,现在是:底部文章分页导航翻页、分类导航及其分页翻页、侧边栏标签云、侧边栏分月存档、评论翻页都是 ajax 加载,荒淫测试!!!

zww
or
oooo

“jQuery中的事件绑定和去除事件绑定”有71条评论

  1. 玎蕾 says:

    准备买你的空间 哈哈

    1. zwwooooo says:

      @玎蕾
      我的空间?

  2. 小邪 says:

    [捏脸]w(^O^)w,嘿嘿,学习一下,闪人 ~

    1. zwwooooo says:

      @小邪
      小邪很熟悉吧

  3. ZDAvril says:

    技术文。只能支持啦。 :mrgreen:
    我下了本《锋利的JQ》pdf。死活看不太懂。不过还在看。 :???:

    1. zwwooooo says:

      @ZDAvril
      啊,那本书应该很容易看懂,最好买一本,也不贵

    2. ZDAvril says:

      @zwwooooo
      嗯。去书店看到的话肯定买一本。 :mrgreen:

  4. loo2k says:

    那个“type:blue”应该是"blur"吧?

    1. zwwooooo says:

      @loo2k
      对,谢谢更正

  5. 无冷 says:

    bind() 倒是用的少 经常用live(),虽然bind可以代替live,自己总是习惯了

    1. zwwooooo says:

      @无冷
      live在杯具的ie下有点问题。

  6. Lee says:

    Z大请教一个问题,绑定一个鼠标点击按钮事件,点击给按钮添加一个css,在点击按钮或者其他地方去除刚才添加的css,这个怎么做呢?谢谢! :roll:

    1. zwwooooo says:

      @Lee
      用class来控制比较方便。如:
      css
      .z{color:#f00;}
      .w{color:#fff;}
      链接中 <a href="#" id="button" class="z" rel="nofollow">oooooo</a> 的 oooooo 是红色

      然后 $('#button').addClass('w');
      这时 ooooo 就是白色。

      要去掉白色就:
      $('#button').removeClass('w');

    2. Lee says:

      @zwwooooo
      哎,我还是不会弄哦,自己写了一个能添加上去,再次点击跳出来的菜单不会消失,我在那个UL本身的class上面加了一个display:block的,现在是这段代码:

      jQuery(document).ready(function(){
      $(".open").bind("click",function(){
      $(".dropdown-menu").next().css({display:"block"});

      })
      $("document").unbind("click");
      });

      这个代码不知道哪里错了,其实我想表达的是点击按钮把原先隐藏的dropdown-menu菜单加个display:block的css,让它出现,然后点击按钮,和其他任何地方除了菜单本身就把前面添加上去的display:block的css去掉!你说的方法,还不会哦!谢谢了哦,我就差这个功能代码了哦! :oops:

    3. Lee says:

      @zwwooooo
      搞定,用了mouseover 不是click。谢谢

    4. zwwooooo says:

      @Lee
      这个……只能指点一二。。。剩下的自己研究折腾

    5. Lee says:

      @zwwooooo

      zwwooooo:
      这个……只能指点一二。。。剩下的自己研究折腾

      嘿嘿,是啊,你的邮件式样不错啊! :oops:

    6. zwwooooo says:

      @Lee
      哈哈哈,因为默认的很难看,不知是哪天我改了一下。

回复给 有点蓝 ¬
取消回复

昵称 *

网址

B em del U Link Code Quote