js立即执行函数应用--事件绑定
Posted web前端开发技术
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js立即执行函数应用--事件绑定相关的知识，希望对你有一定的参考价值。
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立即执行函数应用--事件绑定的主要内容，如果未能解决你的问题，请参考以下文章