JS Execute function application immediately--event binding

The application of the function immediately executed in JS: Applied to the event binding.

Say more, run the code directly (comments in the code):

1 <!DOCTYPE HTML>2 <HTMLLang= "zh">3 <Head>4     <MetaCharSet= "UTF-8" />5     <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge" />6     <title>JS Execute function application immediately--event binding</title>7     <styletype= "Text/css">8 Div{9 margin:10px;Ten Border:1px solid #009F95; One cursor:Pointer; A         } -     </style> -      the </Head> - <Body> -     <DivID= "A1"> - A1 +     </Div> -     <DivID= "A2"> + A2 A     </Div> at     <DivID= "A3"> - A3 -     </Div> -     <Scriptsrc= "Https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></Script> -     <Scripttype= "Text/javascript"> -         $( in             function(){ -                 varEve= ['#a1','#a2','#a3']; to                  for(varI=0; I<Eve.length;i++){ +                     //key point: Execute function immediately -                     (function(i) { the $ (Eve[i]). On ('Click',function(){ * Alert ('Trigger the first'+(i+1)+'Events'); $                         });Panax Notoginseng }) (i);//key point: Incoming current loop value I -                 } the             } +         ); A     </Script> the </Body> + </HTML>

Operation Result:

When you click a div with the ID a1,a2,a3, the corresponding event is triggered separately.

JS Execute function application immediately--event binding