JQuery中DOM实现事件移除的方法


Posted in Javascript onJune 13, 2015

本文实例讲述了JQuery中DOM实现事件移除的方法。分享给大家供大家参考。具体如下:

可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件。假设网页上有一个<button>元素,使用以下代码为该元素绑定多个相同的事件。

$(function(){
 $('#btn').bind("click", function(){
     $('#test').append("<p>我的绑定函数1</p>");
   }).bind("click", function(){
     $('#test').append("<p>我的绑定函数2</p>");
   }).bind("click", function(){
     $('#test').append("<p>我的绑定函数3</p>");
  });
})

1.移除按钮元素上以前注册的事件

先来看看下面代码,点击“删除所有事件”按钮,即可删除上面btn的事件:

<script type="text/javascript">
 $(function(){
  $('#btn').bind("click", function(){
      $('#test').append("<p>我的绑定函数1</p>");
    }).bind("click", function(){
      $('#test').append("<p>我的绑定函数2</p>");
    }).bind("click", function(){
      $('#test').append("<p>我的绑定函数3</p>");
   });
  $('#delAll').click(function(){
    $('#btn').unbind("click");
  });
 })
</script>
<button id="btn">点击我</button>
<div id="test"></div>
<button id="delAll">删除所有事件</button>

来看看unbind()方法的语法结构:unbind([type] [, data]);

第1个参数是事件类型,第2个参数是将要移除的函数,具体说明如下:

如果没有参数,则删除所有绑定的事件。
如果提供了事件类型作为参数,则只删除该类型的绑定事件。
如果把在绑定时传递的处理函数作为第2个参数,则只有这个特定的事件处理函数会被删除。

2.移除<button>元素的其中一个事件

首先需要为这些匿名处理函数指定一个变量。

<script type="text/javascript">
 $(function(){
  $('#btn').bind("click", myFun1 = function(){
      $('#test').append("<p>我的绑定函数1</p>");
    }).bind("click", myFun2 = function(){
      $('#test').append("<p>我的绑定函数2</p>");
    }).bind("click", myFun3 = function(){
      $('#test').append("<p>我的绑定函数3</p>");
   });
  $('#delTwo').click(function(){
    $('#btn').unbind("click",myFun2);
  });
 })
</script>
<button id="btn">点击我</button>
<div id="test"></div>
<button id="delTwo">删除第二个事件</button>

另外,对于只需要触发一次,随后就要立即解除绑定的情况,JQuery提供了一种简写方法——one()方法。one()方法可以为元素绑定处理函数。当处理函数触发一次后,立即被删除。即在每个对象上,事件处理函数只会被执行一次。

one()方法的结构与bind()方法类似,使用方法也与bind()方法相同,其语法结构如下:one (type, [data], fn);

<script type="text/javascript">
 $(function(){
  $('#btn').one("click", function(){
      $('#test').append("<p>我的绑定函数1</p>");
    }).one("click", function(){
      $('#test').append("<p>我的绑定函数2</p>");
    }).one("click", function(){
      $('#test').append("<p>我的绑定函数3</p>");
   });
 })
</script>
<button id="btn">点击我</button>
<div id="test"></div>

使用one()方法为<button>元素绑定单击事件后,只在用户第1次单击按钮时,处理函数才执行,之后的单击就不会再起作用。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
详解Node.js串行化流程控制
May 04 Javascript
vue实现表格增删改查效果的实例代码
Jul 18 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 #Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 #Javascript
JQuery中DOM事件绑定用法详解
Jun 13 #Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 #Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 #Javascript
JavaScript中的Math.E属性使用详解
Jun 12 #Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 #Javascript
You might like
php,不用COM,生成excel文件
2006/10/09 PHP
非常好的php目录导航文件代码
2006/10/09 PHP
php 购物车实例(申精)
2009/05/11 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
jquery $.each() 使用小探
2013/08/23 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
Python编码时应该注意的几个情况
2013/03/04 Python
python numpy元素的区间查找方法
2018/11/14 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
linux环境下Django的安装配置详解
2019/07/22 Python
django的csrf实现过程详解
2019/07/26 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
python在地图上画比例的实例详解
2020/11/13 Python
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
《桂林山水》教学反思
2014/02/08 职场文书
爱心捐书活动总结
2014/07/05 职场文书
师范生见习报告范文
2014/11/03 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
2015年统战工作总结
2015/05/19 职场文书