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 相关文章推荐
javascript hashtable实现代码
Oct 13 Javascript
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
JS修改css样式style浅谈
May 06 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
js变量提升深入理解
Sep 16 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 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中mkdir函数用法实例分析
2014/11/15 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
javascript,jquery闭包概念分析
2010/06/19 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
pymysql的简单封装代码实例
2020/01/08 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
详解python 内存优化
2020/08/17 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
Delphi软件工程师试题
2013/01/29 面试题
信息管理专业推荐信
2013/10/29 职场文书
研修第一天随笔感言
2014/02/15 职场文书
青春无悔演讲稿
2014/05/08 职场文书
个人租房协议书样本
2014/10/01 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
七年级作文之冬景
2019/11/07 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
Python 内置函数速查表一览
2021/06/02 Python
浅谈Python中的正则表达式
2021/06/28 Python
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis
Go语言怎么使用变长参数函数
2022/07/15 Golang
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript