细说 jQuery 事件篇（五） – 事件的移除和重绑定

如果我们需要移除已经注册的事件处理程序，使某些处理程序失效。一种做法是在事件处理程序中使用条件语句进行判断，另一种更彻底的做法就是直接移除该处理程序。

移除处理程序

假设有个 div 和 button，当我们点击 button 时即改变 div 的背景色，当如果我们点击 div 本身则移除 button 上的 click 事件处理程序。

<div></div>
<button>changeBgColor</button>

样式：

div {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
.blue {
  background-color: blue;
}

jquery 代码：

  $('button').click(function() {
    $('div').addClass('blue');//添加样式
  });

  $('button').click(function() {
    alert('change color!');
  });

  $('div').click(function() {
    $('button').off('click');
  });

这里为了区分两个不同的处理程序，特意将 addClass 和 alert 过程分开来写。
当直接点击 button 按钮时，div 背景色发生改变，同时弹出 alert 框。

如果我们提前点击 div 后，使用 .off() 方法移除 button 按钮上的 click 事件处理程序。 此时再点击 button 按钮，click 事件处理程序不再生效。

移除特定的处理程序

在上例中，使用 off 方法移除了 button 按钮 click 事件内的所有的处理程序，但如果我们只想移除改变背景色的处理程序，同时保留 alert 处理程序的话，就需用使用事件命名空间。
事件命名空间其实就是在绑定事件处理程序时加入一些附加信息，用来识别特定的处理程序。
这里需要使用 .on() 方法。
使用 on 方法修改上例中的 jQuery 代码如下：

  $('button').on('click.changeBgColor', function() {
    $('div').addClass('blue');
  });

  $('button').on('click.justAlert', function() {
    alert('I want to change color!');
  });

  $('div').click(function() {
    $('button').off('click.changeBgColor');
  });

第一个事件处理程序我们添加附加信息，命名为 changeBgColor，第二个则命名为 justAlert。当点击 button 按钮后我们只移除 changeBgColor 相关的事件处理程序。
此时先点击 div 后，再点击 button，背景色改变失效，但 alert，仍然生效。

事件重绑定

我们添加一个 default 按钮，当点击 default 按钮后，所有的事件的处理程序又被重新绑定回来。为了能重复使用事件处理程序过程，我们需要使用一个匿名函数表达式来将其赋值给一个局部变量。
添加一个 default 按钮：

<div></div>
<button id="change">changeBgColor</button>
<button id="default">default</button>

修改 jQuery 代码如下：

  var changeBgColor = function() {
    $('div').addClass('blue');
  };
  var justAlert = function() {
    alert('I want to change color!');
  };

  $('button#change').on('click.changeBgColor', changeBgColor);

  $('button#change').on('click.justAlert', justAlert);

  $('div').click(function() {
    $('button#change').off('click.changeBgColor');
  });

  $('button#default').click(function() {
    $('button#change').on('click', changeBgColor);
  });

此时，如果我们先点击 div 后，再点击 change 按钮，修改背景色失效，但如果我们再点击 default 按钮，修改背景色的事件处理程序被重新绑定到 change 按钮的 click 事件中。

参考

http://book.douban.com/subject/24669823/

您可能感兴趣的文章：
细说 jQuery 事件篇（五） – 事件的移除和重绑定
jQuery源码分析系列
细说 jQuery 事件篇（三） – 事件传播
细说 jQuery 事件篇（二） – 处理简单事件
jQuery中live方法的重复绑定说明
浅析jquery某一元素重复绑定的问题
jQuery live( type, fn ) 委派事件实现
细说 jQuery 事件篇（四） – 改变事件过程
jQuery live
解密jQuery事件核心 – 自定义设计（三）