码迷,mamicode.com
首页 > Web开发 > 详细

不使用jquery情况下循环添加绑定事件方法

时间:2017-01-13 12:58:21      阅读:326      评论:0      收藏:0      [点我收藏+]

标签:hid   ble   for   length   pre   seo   cti   style   rip   

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             .page{border: 1px red solid;}
 8             .up{width:300px;height:50px;}
 9             .a{width:90px;height:50px;float: left;border: 1px pink solid;}
10             .down1{width:300px;height:200px;border:1px black solid;padding-top: 10px;}
11         </style>
12     </head>
13     <script>
14     window.onload=function(){
15         var up=document.getElementsByClassName("a")
16         var down=document.getElementsByClassName("down1")
17         console.log(down)
18         for(var i in up){
19             up[i].index=i;
20             down[i].index=i
21         
22             
23             up[i].onmouseover=function(){
24                 //this.style.background="skyblue"
25                 
26                 console.log(this.index)
27                 for(var j=0;j<down.length;j++){
28                     console.log(down[j].index)
29                     if((this.index)==(down[j].index)){
30                         
31                         down[j].style.background="skyblue"
32                         
33                     }
34                     
35                     
36                     
37                     
38                 }
39             }
40         }
41         
42     }
43         
44         
45     </script>
46     <body>
47         <div class="page" style="width: 300px;height:300px;">
48             <div class="up" id="up">
49                 <div class="a">aaa</div>
50                 <div class="a">bbb</div>
51                 <div class="a">ccc</div>
52             </div>
53             <div class="down1" style="display: block;" >qqq</div>
54             <div class="down1" style="display: none;">www</div>
55             <div class="down1" style="display: none;">eee</div>
56             
57         </div>
58     </body>
59 </html>

以上是一个,下面也是一个:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7 table{ border-left: 1px solid gray; border-top: 1px solid gray; width: 300px;}    
 8 td{ border-bottom: 1px solid gray; border-right: 1px solid gray;}
 9 .hide{ display: none;}
10 .selected{ border-bottom: 1px solid white;}
11 </style>
12 
13 <script>
14     window.onload=function(){
15         
16         var tr=document.getElementById("table").getElementsByTagName("tr")
17         var td=tr[0].getElementsByTagName("td")
18     
19     
20         for(var i=0;i<td.length;i++){
21             td[i].index=i
22             td[i].onmouseover=function(){
23                 for(var j=1;j<tr.length;j++){
24                     if(this.index+1 == j){
25                     td[j-1].className=selected;
26                     tr[j].className=‘‘;
27                 }else{
28                     td[j-1].className=‘‘;
29                     tr[j].className=hide;
30                 }
31                 }
32                 
33                 
34             }
35             
36         }
37     }
38     
39     
40 </script>
41     </head>
42     <body>
43         <table id="table" border="0" cellpadding="0" cellspacing="0">
44     <tr>
45         <td class="selected">aaa</td>
46         <td>bbb</td>
47         <td>ccc</td>
48     </tr>
49     <tr>
50         <td colspan="3">a1<br>a2<br>a3</td>
51     </tr>
52     <tr class="hide">
53         <td colspan="3">b1<br>b2<br>b3</td>
54     </tr>
55     <tr class="hide">
56         <td colspan="3">c1<br>c2<br>c3</td>
57     </tr>
58 </table>    
59     </body>
60 </html>

注意到我们在中间都是用了index这个新添加的属性,如果我们不使用这个属性而直接使用i来代替,即24行为if(i+1 == j){

结果就会发现,所有的下半部分内容都被隐藏起来了,而在22和23行之间插入console.log(i)你就会发现i输出结果都是3.

这是因为在绑定事件的时候并不是

i=0-》开始绑定-》将i=0继续代入事件中作为参数-》完成-》继续,并开始下一个循环i=1

而是:

i=0 ->开始绑定事件-》异步绑定事件,同时,i变为1,开始继续绑定事件-》.....

由于绑定事件并不是和i的增加是同步的,即,在i顺序执行的时候,绑定事件被抛出了这一个执行列表,跑到了另一个执行列表当中,而这个异步执行列表的速度有没有原来的快,所以——【当事件开始绑定的时候,循环已经结束,i已经成为了最大值。】

——————————           抛出            ————————————

i=0                             -------》》》    绑定事件1

——————————                          ——————————————

i=1                             -------》》》    绑定事件2

——————————                          ——————————————

i=2                             -------》》》    绑定事件3

——————————                          ——————————————

.....

.....

(还没完?)                                         绑定结束

——————————                          ——————————————

 (赶紧给我)                《《《------      交还结果

顺序执行表                                      异步执行表

循序执行很快(毕竟就是循环,几乎是瞬间完成),所以在顺序执行完毕后,异步才慢慢开始绑定,最终将结果加载回来。

 

不使用jquery情况下循环添加绑定事件方法

标签:hid   ble   for   length   pre   seo   cti   style   rip   

原文地址:http://www.cnblogs.com/thestudy/p/6282271.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!