js中立即執行函數的應用:應用到事件綁定上。 少說多做,直接運行代碼(代碼中有註釋): 運行結果: 當點擊id為a1,a2,a3的div時分別觸發對應的事件。 ...
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時分別觸發對應的事件。