深入理解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 中的replace方法说明
Apr 13 Javascript
JavaScript开发时的五个注意事项
Dec 08 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
Angular的事件和表单详解
Dec 26 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 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短域名转换为实际域名函数
2011/01/17 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
Python操作Excel之xlsx文件
2017/03/24 Python
python实现聚类算法原理
2018/02/12 Python
对python中的高效迭代器函数详解
2018/10/18 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
PHP如何调用MYSQL存储过程
2014/05/30 面试题
中专毕业生求职简历的自我评价
2013/10/21 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
创业计划书如何编写
2014/02/06 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
Python安装使用Scrapy框架
2022/04/12 Python
golang使用map实现去除重复数组
2022/04/14 Golang