1. 程式人生 > >js立即執行函數應用--事件綁定

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

content tps mar set span lang function solid tcs

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 a1 19 </div> 20 <div id="a2"> 21 a2 22 </
div> 23 <div id="a3"> 24 a3 25 </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);//關鍵點:傳入當前循環值i 38 } 39 } 40 ); 41 </script> 42 </body> 43 </html>

運行結果:

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

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