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. Jayuh says:

    沙发,终于抢到了。

    1. zwwooooo says:

      @Jayuh
      恭喜抢到本博第一章沙发!撒花!

    2. Jayuh says:

      @zwwooooo
      好多天了,我天天抢你这个沙发,好几次都是板凳。今天看到了,连文章内容都没看,就赶紧留言,哈哈哈哈!

    3. zwwooooo says:

      @Jayuh
      哈哈,沙发要是看了文章就很难了

  2. 阿修 says:

    这个载入效果很棒

    1. zwwooooo says:

      @阿修
      玩玩,用的是非正式方法,不懂,囧~

  3. winy says:

    如何去除事件绑定,导致 ajax 请求数成倍增长---这个实在什么地方遇到的?

    1. zwwooooo says:

      @winy
      例如我点第一个分类,load完,再点另一个分类,这时的ajax请求是2次,然后再点分类,就变成4次请求,囧~我也不知道问题出在哪里,或许跟我的代码不规范有关系。

    2. winy says:

      @zwwooooo
      啊,这个我知道,我也遇到过。。。但是是在分页的时候,分类上没有这个。

    3. winy says:

      @zwwooooo
      我知道原因:如果你跟我用一样的方法,你在ajax成功后重新调用原函数绑定,(ajax过后DOM绑定失效)但分类按钮那个是不需要重新绑定的!但是分页需要。原因是分页的时候分页按钮ajax更新过了,而分类在页面上是没有变化的,所以不需啊重新绑定,这就是不同的地方。
      囧,都是外行人自己摸索的,也许你懂我的意思 :mrgreen:

    4. zwwooooo says:

      @winy
      非常明白,哈哈哈

  4. QiQiBoY says:

    。。我囧。。bind是从prototype库中流行开的一个对象绑定函数。。。其实就是JS里apply和call的封装。。只不过封装后习惯上都用bind这个词了。。jQuery也是这个。。
    这可不是事件绑定。。这是对象绑定。。。误导大家了。。。 :mrgreen:
    你用click、mouseover等调用函数,函数的作用对象会被修改成调用这个事件的对象本身。而有时我们却不需要这个,所以要将函数绑定到我们需要的对象上。。 :eek:

    1. zwwooooo says:

      @QiQiBoY
      囧~搜到的都是说事件绑定~到底是啥呢?把“事件”全部改为“对象”就ok了???这样就不会误导大家了吧,囧~

    2. QiQiBoY says:

      @QiQiBoY
      事件绑定就是设置监听器。。。比如onclick事件,onload事件等。。jQuery里对象直接click、load就可以搞定。这些都是它封装好的。。。哪里还用bind呢。。
      jQuery里的bind我没看过。。。很久都没关注过jQuery了。之前也没了解这些。。它里面的unbind是否可以移除事件绑定我不太清除。。不过我想既然移除了对象,那么这个对象上的事件肯定也会被注销的。。
      其实去除事件绑定,直接onclick=null就可以注销此对象上的所有单击事件。。或者用移除监听方法。。W3C标准的是removeEventListener,IE9以下版本IE可用detachEvent。。
      jQuery里怎么弄还不太清楚。。不过jQuery对象封装有click事件,应该直接$().click=null也可以移除事件吧。。

    3. zwwooooo says:

      @QiQiBoY
      其实jQuery 1.3后应该用live()吧,不过我加上unbind的确是移除了,而且很多文章说live()以前jQuery都是用bind()的,囧~我在文章注明一下这里你的说明,免得误导。

    4. QiQiBoY says:

      @zwwooooo
      jQuery里的bind功能很复杂,可能在清除对象时也注销了事件。。呵呵,总之能用就行了。。

    5. zwwooooo says:

      @QiQiBoY
      刚才测试了一下$().click=null,没效果,可能我的代码非常不正式,所以会出现成倍请求增加,不过,不管啦,能用就行。

    6. QiQiBoY says:

      @zwwooooo
      呵呵。。这个很正常。。因为使用$()选择器获得的是jQuery对象,jQuery对象它有自己的方法。。可能就是bind之类的了。

    7. Alan says:

      @zwwooooo
      jQuery事件的绑定和解除就是bind()和unbind()

    8. zwwooooo says:

      @Alan
      嗯,我也看到了

  5. 球犯 says:

    我表示我看不懂。。。不用测试就知道很好很强大了。。。Ajax就是帅气逼人啊!

    1. zwwooooo says:

      @球犯
      其实我也不懂,只是为了目的而折腾

  6. Justice says:

    jQuery 里面的

    live()

    die()

    也是很好用的~

    1. zwwooooo says:

      @Justice
      我听说过,但没去查,以前听过一个live什么不支持ie,是不是这个?

  7. 不懂jquery哦,纯粹看看
    PS:昨天的问题不知有没有解决?

    1. zwwooooo says:

      @型男索女
      我也是略懂一二,昨天的问题我去你博客回复了

  8. 好吧,我继续打酱油

    1. zwwooooo says:

      @微奇生活
      听说酱油价格又涨了,唉,杯具

  9. 竹下无为梦 says:

    JQUERY会用的人很强大,不会用的人就麻烦啦。

    1. zwwooooo says:

      @竹下无为梦
      简单应用就很容易折腾,复杂的就需要真正去学了

  10. 有点蓝 says:

    俺先前排就座再慢慢看文…… :oops:

  11. 书香阁 says:

    jquery我真的不是很懂 不多作评论

  12. 路过评分

  13. 超级技术性的。

    我就纯支持!!!!

    1. trylife says:

      @古墓候梅
      看完文章发现此评论和我将要说的内容属于同类,所以同类聚集;
      JQ/JS盲人支持 :grin:

  14. Leyeang says:

    :smile: 遇到看得懂的就好好看,看不懂的就点一下,呵呵。
    努力一下,有朝一日,你讲的东西我争取能看懂。

    1. zwwooooo says:

      @Leyeang
      哈哈,这篇只是记录一下而已

  15. fblue says:

    bind()就是 jQuery中用来绑定事件的方法吧....
    $("#sidebar h3").click(function(){}其实是
    $("#sidebar h3").bind("click",function(){}的简写方式。
    unbind()可以取消绑定的,下面是我用的
    $(window).unbind('.infscr');。
    我才看的《锋利的 jQuery》这本书第四章有详细的说明 :shock:

    1. fblue says:

      @fblue
      锋利的 jQuery用的1.3.1版的,不过这个应该不会变吧。。。
      javascript没系统学过,所以就不清楚与之的关系了 :idea:

    2. mice says:

      @fblue
      :cool: 果断翻下书去....还没注意呢...

    3. zwwooooo says:

      @mice
      1.4.x有讲

    4. zwwooooo says:

      @fblue
      嗯,我们平时用的其实是bind()的简写方式

  16. mice says:

    :mrgreen: 我也想问个弱弱的问题..导致 ajax 请求数成倍增长...这个是怎么看到的...

    1. winy says:

      @mice
      firebug

  17. 我今天也在倒腾AJAX评论,QiQiBoY,那个好像不适合我。我只需要简单的,提交评论不刷新。主题属于非标的那种,我把主题打包扔给飞晏了。 :grin:

    1. zwwooooo says:

      @第六空间
      呵呵,很多种方式吧

  18. 大连SEO says:

    很久前做过ajax的项目,现在已经全忘了,哈。

  19. jQuery 和JS我都不会。。。

    1. zwwooooo says:

      @Gorgons.ME!
      可以慢慢折腾

  20. 坐在20楼围观

    1. zwwooooo says:

      @亿品元素
      风景好不?

回复给 loo2k ¬
取消回复

昵称 *

网址

B em del U Link Code Quote