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 submit()不能提交表单的解决方法
Apr 24 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
jQuery返回定位插件详解
May 15 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 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几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
python2.7的编码问题与解决方法
2016/10/04 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
浅析python协程相关概念
2018/01/20 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
Python求解正态分布置信区间教程
2019/11/20 Python
python的列表List求均值和中位数实例
2020/03/03 Python
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
会计学应届毕业生推荐信
2013/11/04 职场文书
开学典礼感言
2014/02/16 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
实习单位意见
2015/06/04 职场文书
红色经典电影观后感
2015/06/18 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
基于Redis延迟队列的实现代码
2021/05/13 Redis
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
Java实现给Word文件添加文字水印
2022/02/15 Java/Android