js立即执行函数应用--事件绑定
2017-09-15 00:00
316 查看
js中立即执行函数的应用:应用到事件绑定上。
少说多做,直接运行代码(代码中有注释):
运行结果:
当点击id为a1,a2,a3的div时分别触发对应的事件。
少说多做,直接运行代码(代码中有注释):
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立即执行函数应用--事件绑定
- window.addEventListener来解决让一个js事件执行多个函数
- js中的立即执行函数
- js 中的立即执行函数
- JS 事件基础 事件绑定函数
- 深入理解js立即执行函数
- ajax回调函数动态加载的标签里面js事件不执行
- js 事件绑定函数与this的使用
- js中(function(){…})()立即执行函数写法理解
- (转载)js(jquery)的on绑定点击事件执行两次的解决办法
- 兼容IE9以下和非IE浏览器的原生js事件绑定函数
- js中(function(){…})()立即执行函数写法理解
- js中(function(){…})()立即执行函数写法理解
- js中(function(){…})()立即执行函数写法理解
- js 立即执行函数
- 有些控件执行事件时,要在js函数之后加上return false,用来js函数执行后禁止提交表单
- 【js学习之路】事件绑定函数中,将this换成调用对象导致的问题
- JS定义一个立即执行的可重用函数
- js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
- js中立即执行函数写法理解