深入理解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 相关文章推荐
浅谈javascript的原型继承
Jul 25 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
javascript中Object使用详解
Jan 26 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
js校验开始时间和结束时间
May 26 Javascript
JavaScript逻辑运算符相关总结
Sep 04 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
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
Python中new方法的详解
2019/01/15 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
python实现接口并发测试脚本
2019/06/25 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
大三预备党员入党思想汇报
2014/01/08 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
庆国庆活动总结
2014/08/28 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
利用Pycharm连接服务器的全过程记录
2021/07/01 Python