深入理解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的parseInt 取整使用
May 09 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
vue+iview实现手机号分段输入框
Mar 25 Vue.js
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
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
Python中的单行、多行、中文注释方法
2018/07/19 Python
pandas.cut具体使用总结
2019/06/24 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
python3.6编写的单元测试示例
2019/08/17 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
python如何调用字典的key
2020/05/25 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
Python join()函数原理及使用方法
2020/11/14 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
音乐表演专业毕业生求职信
2013/10/14 职场文书
数控专业个人求职信范例
2013/11/29 职场文书
应届毕业生个人自荐信范文
2013/11/30 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
工作经历证明范本
2015/06/15 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏