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

Posted 2020-08-27 起个好名字

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了不使用jquery情况下循环添加绑定事件方法相关的知识，希望对你有一定的参考价值。

 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情况下循环添加绑定事件方法的主要内容，如果未能解决你的问题，请参考以下文章

jquery 动态添加的元素，绑定的事件不生效

jQuery给动态添加的元素绑定事件的方法

如何从 jQuery 中的“滚动”事件中取消绑定所有先前添加的事件？ [复制]

jquery动态添加的元素绑定的事件不生效的问题