zoukankan      html  css  js  c++  java
  • 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时分别触发对应的事件。

  • 相关阅读:
    第八周上机作业
    第七周课后作业
    第七周上机作业
    第六周课后作业
    第六周上机
    第九周JAVA
    第八周JAVA
    第8次JAVA作业
    第七周JAVA
    第7周JAVA
  • 原文地址:https://www.cnblogs.com/mengfangui/p/7079804.html
Copyright © 2011-2022 走看看