深入理解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 相关文章推荐
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
node事件循环和process模块实例分析
Feb 14 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脚本的10个技巧(5)
2006/10/09 PHP
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
回顾Javascript React基础
2019/06/15 Javascript
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
Python读写Excel表格的方法
2021/03/02 Python
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
为什么要做架构设计
2015/07/08 面试题
2014年单位工作总结范文
2014/11/27 职场文书
初级职称评定工作总结
2015/08/13 职场文书
市场营销计划书
2019/04/24 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技