JQuery中绑定事件(bind())和移除事件(unbind())


Posted in Javascript onFebruary 27, 2015

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

比如下面的一个案例:

<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">Click Me</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选择器
Apr 24 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
jQuery异步提交表单实例
May 30 jQuery
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
Jquery中Event对象属性小结
Feb 27 #Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 #Javascript
JS实现往下不断流动网页背景的方法
Feb 27 #Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 #Javascript
asp.net+js实现金额格式化
Feb 27 #Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 #Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 #Javascript
You might like
php程序之die调试法 快速解决错误
2009/09/17 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
PHP运行模式汇总
2016/11/06 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
javascript比较文档位置
2008/04/08 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
jquery 手势密码插件
2017/03/17 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
Python实现的几个常用排序算法实例
2014/06/16 Python
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
python 读取.nii格式图像实例
2020/07/01 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
小学清明节活动方案
2014/03/08 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
老干部工作汇报材料
2014/10/28 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
Mysql数据库group by原理详解
2022/07/07 MySQL