深入理解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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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中加密解密函数与DES加密解密实例
2014/10/17 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
Javascript事件实例详解
2013/11/06 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
Python学习入门之区块链详解
2017/07/25 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
美国折扣网站:jClub
2017/08/07 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
如何进行Linux分区优化
2013/02/12 面试题
新闻编辑求职信
2014/07/13 职场文书
《实心球》教学反思
2016/02/23 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技