网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料:

 

标题 深入理解JQuery循环绑定事件
内容
    下面小编就为大家带来一篇深入理解JQuery循环绑定事件。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。
    深入理解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循环绑定事件就是小编分享给大家的全部内容了,希望能给大家一个参考
随便看

 

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/19 3:50:07