jQuery事件多次绑定与解绑问题实例分析


Posted in jQuery onFebruary 19, 2019

本文实例分析了jQuery事件多次绑定与解绑问题。分享给大家供大家参考,具体如下:

jQuery事件绑定很常见,相信大家经常会用到clickfocusblur等事件,但是如果对控件的某个事件绑定多个方法会是怎样的结果呢,覆盖、累加、或其他效果?今天我就来验证一下这个疑问并说说如何解绑。

一、jQuery事件多次绑定

<head>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      //第二次绑定
      $("#btnAdd").click(function () {
        alert("bind click1");
      });
      //第三次绑定
      $("#btnAdd").on("click", function () {
        alert("bind click2");
      });
      //第四次绑定
      $("#btnAdd").bind("click", function () {
        alert("bind click3");
      });
    });
    function add1() {
      alert("add1()");
    }
  </script>
</head>
<body>
  <h2>UserController->Index</h2>
  <!--第一次绑定-->
  <input type="button" id="btnAdd" name="btnAdd" value="Add" onclick="add1()" />
</body>

验证结果:对控件的某个事件进行多次绑定效果会叠加,截图如下:

jQuery事件多次绑定与解绑问题实例分析

二、jQuery事件解绑

既然能绑定事件,那应该也能对事件解绑,下面展示解绑的方法:

<head>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#btnAdd").click(function () {
        alert("bind click1");
      });
      $("#btnAdd").on("click", add2);
      $("#btnAdd").bind("click", add3);
    });
    function add1() {
      alert("add1()");
    }
    function add2() {
      alert("bind click2");
    }
    function add3() {
      alert("bind click3");
    }
    function cancelBind() {
      //不指定方法名则解绑click事件对应的所有方法,标签内onclick设置的方法仍会执行
      //$("#btnAdd").off("click");
      //$("#btnAdd").unbind("click");
      //解绑click事件对应的add2方法
      $("#btnAdd").off("click", add2);
      //$("#btnAdd").unbind("click", add3);
    }
  </script>
</head>
<body>
  <h2>UserController->CancelBind</h2>
  <input type="button" id="btnAdd" name="btnAdd" value="Add" onclick="add1()" />
  <input type="button" id="btnCancelBind" name="btnCancelBind" value="CancelBind" onclick="cancelBind()" />
</body>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 #jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 #jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 #jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 #jQuery
jQuery实现的五星点评功能【案例】
Feb 18 #jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 #jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 #jQuery
You might like
php 高性能书写
2010/12/11 PHP
基于php iconv函数的使用详解
2013/06/09 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
浅析Python迭代器的高级用法
2020/07/16 Python
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
体育馆的标语
2014/06/24 职场文书
IT工程师岗位职责
2014/07/04 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
党内外群众意见范文
2015/06/02 职场文书