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 相关文章推荐
jQuery 常见开发使用技巧总结
Dec 26 Javascript
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
p5.js入门教程之图片加载
2018/03/20 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
python查找指定具有相同内容文件的方法
2015/06/28 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
python中 * 的用法详解
2019/07/10 Python
对Python函数设计规范详解
2019/07/19 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
python tqdm库的使用
2020/11/30 Python
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
公司采购主管岗位职责
2014/06/17 职场文书
爱国口号
2014/06/19 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书