深入理解JQuery循環(huán)綁定事件

更新時(shí)間：2016年06月02日 10:17:21 投稿：jingxian

下面小編就為大家?guī)硪黄钊肜斫釰Query循環(huán)綁定事件。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

深入理解JQuery循環(huán)綁定事件

<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， 因?yàn)閒unction() {} 并沒有被立即解析，直到調(diào)用的時(shí)候才被解析，這時(shí)index已經(jīng)是3了。


        // 2.
        
        // 立即彈出0, 1, 2, 3，因?yàn)槭褂昧薴unction() {}(index)立即被解析，遇到alert，就立即彈出來了。


        // 3.
        
        // 正確執(zhí)行，點(diǎn)擊btn0，彈出0，點(diǎn)擊btn1，彈出1...
        // 1.因?yàn)閒unction(i) {}(index)是被立即解析的，所以i依次送入的是0, 1, 2, 3
        // 2.內(nèi)部沒有直接alert，是因?yàn)椴幌肓⒓磮?zhí)行，想點(diǎn)擊時(shí)再執(zhí)行，所以返回了一個(gè)函數(shù)出去。


        // 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);
        }
        // 正確執(zhí)行，點(diǎn)擊btn0，彈出0，點(diǎn)擊btn1，彈出1...
        // 利用了event.data，因?yàn)閕ndex在綁定的時(shí)候已經(jīng)被持久化到event.data中了，所以響應(yīng)的時(shí)候我們可以取到。
      });
    
    </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循環(huán)綁定事件就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jquery 顯示*天*時(shí)*分*秒實(shí)現(xiàn)時(shí)間計(jì)時(shí)器
用jquery實(shí)現(xiàn)時(shí)間計(jì)時(shí)器,從之前的某個(gè)時(shí)間段到現(xiàn)在距離多少天多少時(shí)多少分多少秒，示例代碼如下，大家拷貝即可使用
2014-05-05
jQuery 篩選器簡(jiǎn)單操作示例
這篇文章主要介紹了jQuery 篩選器簡(jiǎn)單操作,結(jié)合實(shí)例形式詳細(xì)分析了jQuery篩選器針對(duì)元素、字符串、屬性等操作常見技巧與操作注意實(shí)行,需要的朋友可以參考下
2019-10-10
jQuery獲取及設(shè)置表單input各種類型值的方法小結(jié)
這篇文章主要介紹了jQuery獲取及設(shè)置表單input各種類型值的方法,總結(jié)分析了jQuery針對(duì)表單元素的各種常見操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2016-05-05
jQuery ready函數(shù)濫用分析
jQuery的ready函數(shù)為我們編寫打開頁面時(shí)運(yùn)行的腳本提供了方便，讓我們不必再關(guān)注什么window.onLoad之類的事件，但是最近發(fā)現(xiàn)自己之前寫的代碼有點(diǎn)濫用這個(gè)函數(shù)了。
2011-02-02
基于Jquery的簡(jiǎn)單&簡(jiǎn)陋Tabs插件代碼
一個(gè)基于Jquery的簡(jiǎn)單&簡(jiǎn)陋Tabs插件，學(xué)習(xí)的朋友可以參考下。
2010-02-02
JQuery 1.3.2以上版本中出現(xiàn)pareseerror錯(cuò)誤的解決方法
最近正在做一個(gè)系統(tǒng)，測(cè)試組那邊不停的報(bào)告bug：后臺(tái)、前臺(tái)各種列表報(bào)告js彈出窗錯(cuò)誤，內(nèi)容僅僅是一句“pareseerror”！
2011-01-01
基于jquery實(shí)現(xiàn)智能提示控件intellSeach.js
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)智能提示控件intellSeach.js的相關(guān)資料，感興趣的小伙伴們可以參考一下
2016-03-03
jquery 步驟進(jìn)度軸插件的實(shí)現(xiàn)代碼
今天給大家分享一個(gè)jquery插件之步驟進(jìn)度軸的實(shí)現(xiàn)思路，這個(gè)功能在一些網(wǎng)站注冊(cè)賬號(hào)時(shí)一般都會(huì)用到，今天就通過實(shí)例代碼給大家詳細(xì)介紹下，感興趣的朋友跟隨小編一起看看吧
2021-05-05
Jquery on方法綁定事件后執(zhí)行多次的解決方法
下面小編就為大家?guī)硪黄狫query on方法綁定事件后執(zhí)行多次的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
jQuery Ajax請(qǐng)求后臺(tái)數(shù)據(jù)并在前臺(tái)接收
這篇文章主要介紹了jQuery Ajax請(qǐng)求后臺(tái)數(shù)據(jù)并在前臺(tái)接收的相關(guān)資料,需要的朋友可以參考下
2016-12-12