深入理解JQuery循环绑定事件


Posted in Javascript onJune 02, 2016

深入理解JQuery循环绑定事件

<html>
  <head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      $(document).ready(function () {
        var array = [0, 1, 2, 3];

        // 1.
        
        // 始终弹出3, 因为function() {} 并没有被立即解析,直到调用的时候才被解析,这时index已经是3了。


        // 2.
        
        // 立即弹出0, 1, 2, 3,因为使用了function() {}(index)立即被解析,遇到alert,就立即弹出来了。


        // 3.
        
        // 正确执行,点击btn0,弹出0,点击btn1,弹出1...
        // 1.因为function(i) {}(index)是被立即解析的,所以i依次送入的是0, 1, 2, 3
        // 2.内部没有直接alert,是因为不想立即执行,想点击时再执行,所以返回了一个函数出去。


        // 4.
        for (var index in array) {
          $("#btn" + index).bind("click", {index: index}, clickHandler);
        }

        function clickHandler(event) {
          var index = event.data.index;
          var item = array[index];
          alert(item);
        }
        // 正确执行,点击btn0,弹出0,点击btn1,弹出1...
        // 利用了event.data,因为index在绑定的时候已经被持久化到event.data中了,所以响应的时候我们可以取到。
      });
    
    </script>

    <input type="button" id="btn0" value="btn0" />
    <input type="button" id="btn1" value="btn1" />
    <input type="button" id="btn2" value="btn2" />
    <input type="button" id="btn3" value="btn3" />    
  </body>
</html>

以上这篇深入理解JQuery循环绑定事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
Element InputNumber 计数器的实现示例
Aug 03 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 #Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 #Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 #Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 #Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 #Javascript
深入理解jQuery事件绑定
Jun 02 #Javascript
jQuery获取单击节点对象的方法
Jun 02 #Javascript
You might like
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
详细讲解JS节点知识
2010/01/31 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
Python中的各种装饰器详解
2015/04/11 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
python实现单链表的方法示例
2019/09/03 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
动物学专业毕业生求职信
2013/10/11 职场文书
党章学习思想汇报
2014/01/14 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript
详解nginx location指令
2022/01/18 Servers