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+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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 错误处理经验分享
2011/10/11 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
PHP getName()函数讲解
2019/02/03 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
js中eval详解
2012/03/30 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
Python写的Socks5协议代理服务器
2014/08/06 Python
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
Python学习小技巧总结
2018/06/10 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
C#面试常见问题
2013/02/25 面试题
超市业务员岗位职责
2013/12/05 职场文书
个人委托书范本
2014/04/02 职场文书
品牌服务方案
2014/06/03 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers