js中立即执行函数的应用：应用到事件绑定上。

少说多做，直接运行代码（代码中有注释）：

 <!DOCTYPE html>

 <html lang="zh">

 <head>

     <meta charset="UTF-8" />

     <meta http-equiv="X-UA-Compatible" content="ie=edge" />

     <title>js立即执行函数应用--事件绑定</title>

     <style type="text/css">

         div{

             margin: 10px;

             border: 1px solid #009F95;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

     <div id="a1">

         a1

     </div>

     <div id="a2">

         a2

     </div>

     <div id="a3">

         a3

     </div>

     <script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>

     <script type="text/javascript">

         $(

             function(){

                 var eve = ['#a1','#a2','#a3'];

                 for(var i=0;i<eve.length;i++){

                     //关键点：立即执行函数

                     (function(i){

                         $(eve[i]).on('click',function(){

                             alert('触发第'+(i+1)+'事件');

                         });

                     })(i);//关键点：传入当前循环值i

                 }

             }

         );

     </script>

 </body>

 </html>

运行结果：

当点击id为a1，a2,a3的div时分别触发对应的事件。

js立即执行函数应用--事件绑定的更多相关文章

  1. js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域

    js基础 目录 javascript基础 ESMAScript数据类型 DOM JS常用方法 回到顶部 javascript基础 常说的js包括三个部分:dom(文档document).bom(浏览器 ...

  2. js立即执行函数

    一.JS立即执行函数的写法 方式1.最前最后加括号 (function(){alert(1);}()); 方式2.function外面加括号   (function(){alert(1);})(); ...

  3. 模板语言变量,js变量,js自执行函数之前嵌套调用

    1.模板语言变量 前端html页面中展示 {{ nodeIp }} 2.js变量引用模板语言变量 把模板语言变量传递给js,js去执行页面操作(变量的转换,只适用于字符串) var IP = &quo ...

  4. js立即执行函数用法

    js立即执行函数可以让你的函数在创建后立即执行,js立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行. 一.JS立即执行 ...

  5. js自执行函数的常见写法

    js自执行函数的常见写法 2016-12-20 20:02:26 1.关于自执行函数 1.1 写自执行函数的好处:独立的作用域,不会污染全局环境 (function() { })(); 1.2 理解重 ...

  6. js 立即执行函数定义方法

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  7. Ajax：js自执行函数、jsonp、cros

    一.js自执行函数 #(function(){alert(1);})(); (function(){ alert(1); } )(); 二.javascript同源策略 1. 什么是同源策略 理解跨域 ...

  8. JS 自执行函数

    由于自己js基础知识薄弱,很多js的知识还没有掌握,所以接下来会经常写一些关于js基础知识的博客,也算给自己提个醒吧. js自执行函数,听到这个名字,首先会联想到函数.接下来,我来定义一个函数: fu ...

  9. js-DOM ～ 05. Date日期的相关操作、string、查字符串的位置、给索引查字符、字符串截取slice／substr／substring、去除空格、替换、大小写、Math函数、事件绑定、this

    内置对象:  语言自带的对象/提供了常用的.基本的功能 打印数组和字符串不用for... in   /   打印josn的时候采用for...in Date 获取当前事件:   var date = ...

随机推荐

  1. How to match between physical usb device and its drive letter?

    struct tagDrives { WCHAR letter; WCHAR volume[ BUFFER_SIZE ]; } g_drives[ ]; // WCHAR GetUSBDrive( ) ...

  2. linux普通用户获取管理员权限

    原文:http://www.cnblogs.com/likwo/p/3435404.html 测试环境:CentOS 5.5 1.添加用户,首先用adduser命令添加一个普通用户,命令如下: #ad ...

  3. Spring初始化完成后直接执行一个方法，初始化数据（解决方法被重复执行两次的情况）

    在做WEB项目时,经常在项目第一次启动时利用WEB容器的监听.Servlet加载初始化等切入点为数据库准备数据,这些初始化数据 是系统开始运行前必须的数据,例如权限组.系统选项.默认管理员等等.但是项 ...

  4. Xcode　GDB　调试

    关于GDB 对于大多数Cocoa程序员来说,最常用的debugger莫过于Xcode自带的调试工具了.而实际上,它正是gdb的一个图形化包装.相对于gdb,图形化带来了很多便利,但同时也缺少了一些重要 ...

  5. Selenium2+python自动化60-异常后截图（screenshot）

    前言 在执行用例过程中由于是无人值守的,用例运行报错的时候,我们希望能对当前屏幕截图,留下证据. 在写用例的时候,最后一步是断言,可以把截图的动作放在断言这里,那么如何在断言失败后截图呢? 一.截图方 ...

  6. (学)如何在Oracle中一次执行多条sql语句

    队长同学原来的地址:https://www.cnblogs.com/teamleader/archive/2007/05/31/765943.html队长同学原来的描述: 有时我们需要一次性执行多条s ...

  7. Latex 初学者入门（四）-- 多个作者共享同一个地址

    又给老板改格式,其实感觉大多会议都是模板不同,不同主要在于注释,作者,摘要以及引用文献的不同,上次的那篇讲bib数据库的用法,真是倒腾了一整天,不知道为什么一定要使用这种东西,而且老板貌似对人家的风格 ...

  8. 【BZOJ】【3239】Discrete Logging

    BSGS BSGS裸题,嗯题目中也有提示:求a^m (mod p)的逆元可用快速幂,即 pow(a,P-m-1,P) * (a^m) = 1 (mod p) /******************** ...

  9. OpenCV学习(35) OpenCV中的PCA算法

    PCA算法的基本原理可以参考:http://www.cnblogs.com/mikewolf2002/p/3429711.html     对一副宽p.高q的二维灰度图,要完整表示该图像,需要m = ...

  10. C/C++中内联(inline)函数的优点和缺点

    优点 缺点 1. 内联函数代码被放入符号表中,在使用时进行替换,和宏展开一样,效率很高: 1. 不允许过多的代码,代码过多的话会造成大的内存消耗,最好在5行以内: 2. 编绎器在调用一个内联函数,首先 ...