js立即執行函數應用--事件綁定
阿新 • • 發佈：2017-06-26
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立即執行函數應用--事件綁定