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 相关文章推荐
一个js写的日历(代码部分网摘)
Sep 20 Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
简单的渐变轮播插件
Jan 12 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
vue 实现走马灯效果
Oct 28 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 Javascript
JavaScript数组去重实现方法小结
Jan 17 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数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
浅谈Vue.js
2017/03/02 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
Python中常用的内置方法
2019/01/28 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
python实现猜数游戏
2020/03/27 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
英国足球店:UK Soccer Shop
2017/11/19 全球购物
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
struct和class的区别
2015/11/20 面试题
求职毕业生自荐书
2014/02/08 职场文书
企业宣传工作方案
2014/06/02 职场文书
创先争优活动承诺书
2014/08/30 职场文书
考试作弊检讨
2015/01/27 职场文书
领导新年致辞2016
2015/07/29 职场文书
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python