首页 > 编程 > JavaScript > 正文

深入理解JQuery循环绑定事件

2019-11-20 09:49:36
字体:
来源:转载
供稿:网友

深入理解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循环绑定事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表