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 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
JS实现购物车特效
Feb 02 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
第十节--抽象方法和抽象类
2006/11/16 PHP
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
php调用shell的方法
2014/11/05 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
js css自定义分页效果
2017/02/24 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
Python素数检测实例分析
2015/06/15 Python
python九九乘法表的实例
2017/09/26 Python
python使用matplotlib绘制热图
2018/11/07 Python
详解python-图像处理(映射变换)
2019/03/22 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
测绘工程个人的自我评价
2013/11/23 职场文书
安全标兵事迹材料
2014/08/17 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android