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

boredream 发布于2019-08-19 14:53 / 2814人阅读

摘要：一种做法是在事件处理程序中使用条件语句进行判断，另一种更彻底的做法就是直接移除该处理程序。事件重绑定我们添加一个按钮，当点击按钮后，所有的事件的处理程序又被重新绑定回来。

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

移除处理程序

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

样式：

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 按钮：

修改 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/

云服务器 GPU云服务器 jquery预绑定事件 jquery绑定hover事件 jquery绑定事件on 移除事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78166.html

细说 jQuery 事件篇（二） - 处理简单事件

摘要：我们可以利用可以对用户发起的事件进行处理，这里以样式转换为例来说明。其他类似的操作事件都可以通过这个方法，将处理事件的程序绑定到同名事件上面。我们可以利用 jQuery 可以对用户发起的事件进行处理，这里以样式转换为例来说明。增添样式基于用户的事件，对特定的 DOM 元素样式进行转换是 jQuery 处理事件中比较常见的情形，举例说明，当用户点击输入框后，会增添 highli...

ckllj 2019-08-19 14:51 评论0 收藏0
细说 jQuery 事件篇（三） - 事件传播

摘要：是如何决定由哪个元素来处理事件的，以及又是如何优化处理这个问题的，这些都涉及到了事件传播。事件冒泡的弊端事件冒泡可能会导致意料之外的行为，例如在响应事件时，依旧是上例，当为最外层的添加一个事件。使用方法可以避免事件传播导致的问题。 Javascript 是如何决定由哪个元素来处理事件的，以及 jQuery 又是如何优化处理这个问题的，这些都涉及到了事件传播。事件传播策略当页面内...

Cc_2011 2019-08-19 14:51 评论0 收藏0
前端培训-中级阶段（6）- jQuery的事件绑定链式操作及原理（2019-07-25期）

摘要：前端最基础的就是。帮助从旧的事件方法转换，和。方法移除用绑定的事件处理程序。特定的事件处理程序可以被移除元素上提供事件名称，命名空间，处理函数。用于过滤器的触发事件的选择器元素的后代。事件触发模拟触发原生使用触发。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS）...

Airy 2019-08-02 15:25 评论0 收藏0
前端培训-中级阶段（6）- jQuery的事件绑定链式操作及原理（2019-07-25期）

摘要：前端最基础的就是。帮助从旧的事件方法转换，和。方法移除用绑定的事件处理程序。特定的事件处理程序可以被移除元素上提供事件名称，命名空间，处理函数。用于过滤器的触发事件的选择器元素的后代。事件触发模拟触发原生使用触发。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS）...

sutaking 2019-08-23 18:26 评论0 收藏0
只执行一次的事件绑定函数

摘要：原生事件绑定所谓的移除事件处理函数指的是对于给定的元素和事件类型，处理程序在第一次触发事件后会被立即解除绑定。如果为表示事件执行之后会自动移除绑定。标准事件事件绑定提供了一个方法实现只绑定一次的事件。已同步到个人博客只执行一次的事件绑定函数概览在前端开发中，有时会希望事件只被调用一次。比如，点击一张缩略图加载视频文件或点击更多图标通过AJAX展示额外的内容。当多次点击的时候，事件处...

Kahn 2019-08-22 17:19 评论0 收藏0