深入理解jQuery之事件移除


Posted in Javascript onJune 02, 2016

有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理。比如bind()方法,可以通过unbind()方法来移除事件的效果。

比如下面的一个案例:

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

html部分:

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

当点击按钮btn时,触发了三个点击事件,这里的append()方法,向div层中传递了三个段落内容。

append() 方法在被选元素的结尾(仍然在内部)插入指定内容。它与html()方法还是不同的,html()方法是改变整个元素中的内容,而不是向元素结尾插入内容。text()方法与html() 方法类似,但区别在于html()方法中可以写入html的代码,而且可以被正确的解析,而text() 只能当html代码为正常的字符串。

这里每次点击,都会执行一次事件,想div层末尾添加段落。

下面的代码是取消事件效果的,可以通过删除事件,使点击效果失效:

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

$('#btn').unbind("click");这句代码的作用就是取消元素btn下的click事件。它不仅仅对于bind()方法有效,它对于click()方法同样有效。从某种角度上讲,bind("click",function(){})与click(function(){})是等价的。

 还可以针对具体的方法,删除特定的事件。

下面的代码可以参考:

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

unbind()方法的第二个参数是事件对应得执行函数的名字,这样执行完后,只有myFun2这个事件被删除了,其他两个click事件正常执行。

还有一种跟bind()方法类似的方法one(),区别大概就是one()方法只执行一次。

为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。

代码如下:

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

 点击后,只执行一次。再次点击不会触发效果。这就是one方法。

以上这篇深入理解jQuery之事件移除就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
JavaScript运算符小结
Jun 03 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
Ant Design的Table组件去除
Oct 24 Javascript
深入理解JQuery循环绑定事件
Jun 02 #Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 #Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 #Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 #Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 #Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 #Javascript
深入理解jQuery事件绑定
Jun 02 #Javascript
You might like
php格式化工具Beautify PHP小小BUG
2008/04/24 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
JavaScript延迟加载
2021/03/09 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
python实现发送和获取手机短信验证码
2016/01/15 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
python url 参数修改方法
2018/12/26 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
Django app配置多个数据库代码实例
2019/12/17 Python
世界最大的票务市场:viagogo
2017/02/16 全球购物
小饰品店的创业计划书范文
2013/12/28 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
共青团员自我评价
2015/03/10 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
政工师工作总结2015
2015/05/26 职场文书
导游词之杭州西湖
2019/09/19 职场文书
Ajax实现三级联动效果
2021/10/05 Javascript
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers