深入理解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 相关文章推荐
JS分割字符串并放入数组的函数
Jul 04 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
Javascript原型链及instanceof原理详解
May 25 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 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 程序授权验证开发思路
2009/07/09 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
javascript中的几个运算符
2007/06/29 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
Javascript面向对象编程
2012/03/18 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
django-csrf使用和禁用方式
2020/03/13 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
经典大学生求职信范文
2014/01/06 职场文书
公司成立感言
2014/01/11 职场文书
爱祖国演讲稿
2014/05/04 职场文书
食品安全承诺书范文
2014/08/29 职场文书
报到证办理个人委托书
2014/10/06 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
初中生物教学反思
2016/02/20 职场文书
gateway网关接口请求的校验方式
2021/07/15 Java/Android