jQuery 移除事件的方法


Posted in jQuery onJune 20, 2020

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

<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>");
       });
  })
</script>

<body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>

jQuery 移除事件的方法

当单击按钮后,会出现如上图所示的效果。

1. 移除按钮元素上所有注册的事件

添加一个移除事件的按钮。然后为按钮绑定一个事件,代码如下:

<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>

<body>
<button id="btn">点击我</button>
<div id="test"></div>
<button id="delAll">删除所有事件</button>
</body>

因为元素绑定的都是 click 事件,所以不写参数也可以达到同样的目的。

$('#delAll').click(function(){
$('#btn').unbind();
});

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

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

(1) 如果没有参数,则删除所有绑定的事件。

(2) 如果提供了事件类型作为参数,则只删除该类型的绑定事件。

(3) 如果把在绑定时传递的处理函数作为第2个参数,则只有这个特定的事件处理函数会被删除。

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

首先需要为这些匿名处理函数指定一个变量。然后就可以单独删除某一个事件了, jQuery 代码如下:

<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>

<body>
<button id="btn">点击我</button>
<div id="test"></div>
<button id="delTwo">删除第二个事件</button>
</body>

当单击“删除第二个事件”按钮后,再次单击“点击我”按钮,显示下图所示的效果。

jQuery 移除事件的方法

另外,对于只需要触发一次,随后就要立即解除绑定的情况,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>

<body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>

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

以上就是jQuery 移除事件的方法的详细内容,更多关于jQuery 移除事件的资料请关注三水点靠木其它相关文章!

jQuery 相关文章推荐
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery Tree Multiselect使用详解
May 02 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 #jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 #jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 #jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 #jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 #jQuery
深入分析jQuery.one() 函数
Jun 03 #jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 #jQuery
You might like
php添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python单链表简单实现代码
2016/04/27 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
python学生管理系统开发
2019/01/30 Python
python画图的函数用法以及技巧
2019/06/28 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
python清空命令行方式
2020/01/13 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
读书心得体会
2013/12/28 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
党员领导干部承诺书
2014/05/28 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
Matlab如何实现矩阵复制扩充
2021/06/02 Python