当前位置: 首页 > 编程笔记 >

深入理解JQuery循环绑定事件

荆炳
2023-03-14
本文向大家介绍深入理解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循环绑定事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍深入理解jQuery事件绑定,包括了深入理解jQuery事件绑定的使用技巧和注意事项,需要的朋友参考一下 html: javascript: 一些说明: bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert("ok");});live(type,[data],fn) 给所有匹配的元

  • 本文向大家介绍深入理解jQuery 事件处理,包括了深入理解jQuery 事件处理的使用技巧和注意事项,需要的朋友参考一下 浏览器的事件模型 DOM第0级事件模型 1.Event实例 他的属性提供了关于当前正被处理的已触发事件的大量信息。这包括一些细节,比如在哪个元素上触发的事件、鼠标事件的坐标以及键盘事件中单击了哪个键。 2.事件冒泡 当触发 dom 树中一个元素上的事件时,事件模型会检查这个元

  • 本文向大家介绍JQuery在循环中绑定事件的问题详解,包括了JQuery在循环中绑定事件的问题详解的使用技巧和注意事项,需要的朋友参考一下 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 现在有个循环,在页面载入的时候需要给这每个元素增加一个onclick事件,很容易想到的写法就是 这么写是错误的。。。 错误的原因以及类似的错误分析详见这篇文章《深入理解JQuery循环绑

  • 本文向大家介绍深入理解JS的事件绑定、事件流模型,包括了深入理解JS的事件绑定、事件流模型的使用技巧和注意事项,需要的朋友参考一下  一、JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件:  onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll 3.键盘

  • 本文向大家介绍深入理解Node.js 事件循环和回调函数,包括了深入理解Node.js 事件循环和回调函数的使用技巧和注意事项,需要的朋友参考一下 本文详细的介绍了Node.js 事件循环和Node.js回调函数,废话不多说了,具体看下面把。  一、Node.js 事件循环 Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高。Node.js 的每一个 API 都是异

  • 本文向大家介绍深入理解jQuery之事件移除,包括了深入理解jQuery之事件移除的使用技巧和注意事项,需要的朋友参考一下 有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理。比如bind()方法,可以通过unbind()方法来移除事件的效果。 比如下面的一个案例: html部分: 当点击按钮btn时,触发了三个点击事件,这里的append()方法,向div层中传递了三个段落内容。 ap