js立即執行函數應用--事件綁定

來源:互聯網
上載者:User

標籤:margin   har   logs   ack   cdn   code   UI   var   tle   

js中立即執行函數的應用:應用到事件綁定上。

少說多做,直接運行代碼(代碼中有注釋):

 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4     <meta charset="UTF-8" /> 5     <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 6     <title>js立即執行函數應用--事件綁定</title> 7     <style type="text/css"> 8         div{ 9             margin: 10px;10             border: 1px solid #009F95;11             cursor: pointer;12         }13     </style>14     15 </head>16 <body>17     <div id="a1">18         a119     </div>20     <div id="a2">21         a222     </div>23     <div id="a3">24         a325     </div>26     <script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>27     <script type="text/javascript">28         $(29             function(){30                 var eve = [‘#a1‘,‘#a2‘,‘#a3‘];31                 for(var i=0;i<eve.length;i++){32                     //關鍵點:立即執行函數33                     (function(i){34                         $(eve[i]).on(‘click‘,function(){35                             alert(‘觸發第‘+(i+1)+‘事件‘);36                         });37                     })(i);//關鍵點:傳入當前迴圈值i38                 }39             }40         );41     </script>42 </body>43 </html>

運行結果:

當點擊id為a1,a2,a3的div時分別觸發對應的事件。

js立即執行函數應用--事件綁定

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.