<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             .page{border: 1px red solid;}

             .up{width:300px;height:50px;}

             .a{width:90px;height:50px;float: left;border: 1px pink solid;}

             .down1{width:300px;height:200px;border:1px black solid;padding-top: 10px;}

         </style>

     </head>

     <script>

     window.onload=function(){

         var up=document.getElementsByClassName("a")

         var down=document.getElementsByClassName("down1")

         console.log(down)

         for(var i in up){

             up[i].index=i;

             down[i].index=i

             up[i].onmouseover=function(){

                 //this.style.background="skyblue"

                 console.log(this.index)

                 for(var j=0;j<down.length;j++){

                     console.log(down[j].index)

                     if((this.index)==(down[j].index)){

                         down[j].style.background="skyblue"

                     }

                 }

             }

         }

     }

     </script>

     <body>

         <div class="page" style="width: 300px;height:300px;">

             <div class="up" id="up">

                 <div class="a">aaa</div>

                 <div class="a">bbb</div>

                 <div class="a">ccc</div>

             </div>

             <div class="down1" style="display: block;" >qqq</div>

             <div class="down1" style="display: none;">www</div>

             <div class="down1" style="display: none;">eee</div>

         </div>

     </body>

 </html>

以上是一个，下面也是一个：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

 table{ border-left: 1px solid gray; border-top: 1px solid gray; width: 300px;}

 td{ border-bottom: 1px solid gray; border-right: 1px solid gray;}

 .hide{ display: none;}

 .selected{ border-bottom: 1px solid white;}

 </style>

 <script>

     window.onload=function(){

         var tr=document.getElementById("table").getElementsByTagName("tr")

         var td=tr[0].getElementsByTagName("td")

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

             td[i].index=i

             td[i].onmouseover=function(){

                 for(var j=1;j<tr.length;j++){

                     if(this.index+1 == j){

                     td[j-1].className='selected';

                     tr[j].className='';

                 }else{

                     td[j-1].className='';

                     tr[j].className='hide';

                 }

                 }

             }

         }

     }

 </script>

     </head>

     <body>

         <table id="table" border="0" cellpadding="0" cellspacing="0">

     <tr>

         <td class="selected">aaa</td>

         <td>bbb</td>

         <td>ccc</td>

     </tr>

     <tr>

         <td colspan="3">a1<br>a2<br>a3</td>

     </tr>

     <tr class="hide">

         <td colspan="3">b1<br>b2<br>b3</td>

     </tr>

     <tr class="hide">

         <td colspan="3">c1<br>c2<br>c3</td>

     </tr>

 </table>

     </body>

 </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情况下循环添加绑定事件方法的更多相关文章

  1. JQuery在循环中绑定事件的问题详解

    JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...

  2. jquery的bind跟on绑定事件的区别

    jquery的bind跟on绑定事件的区别:主要是事件冒泡: jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) .on(ev ...

  3. jQuery绑定事件方法及区别(bind,click,on,live,one)

    第一种方式: ? 1 2 3 4 5 $(document).ready(function(){  $("#clickme").click(function(){  alert(& ...

  4. jQ给下拉框绑定事件，为什么要绑定在框(select标签)上，而不是绑定在选项(option标签)上

    这是我在学习锋利的 jquery 书中 5.1.4 的代码时遇到的一个小问题,源代码如下: <head> <style type="text/css"> * ...

  5. jquery动态添加元素无法触发绑定事件的解决方案。

    jquery动态添加元素无法触发绑定的事件的解决方案. ╭(●｀∀´●)╯二狗最近在工作中遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件(╯#-_-)╯╧═╧ ( ...

  6. JanusGraph ：Cassandra作为存储后端的情况下，JanusGraph的安装方法

    Cassandra作为存储后端的情况下,JanusGraph的安装方法 Cassandra作为存储后端的情况下,JanusGraph的安装分为四种方式. 分别是: 1.本地服务器模式(这里的服务器指的 ...

  7. JqueryOn绑定事件方法介绍

    JqueryOn绑定事件方法介绍 1. 简介 (1) On()方法在被选及子元素上添加一个或多个事件处理程序 (2) 在jquery 版本1.7起,on()方法是bind(),live()和deleg ...

  8. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  9. jquery动态生成html代码绑定事件

    今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老 ...

随机推荐

  1. 结构-行为-样式-Javascript笔记

    一.console.dir()可以显示一个对象所有的属性和方法. 二.递归遍历一个数据集合: A.数据: {  "menu": [    {      "menuId&q ...

  2. Python各种花式截图工具，截到你手软

    前言: 最近,项目中遇到了一个关于实现通过给定URL,实现对网页屏幕进行截图的一个功能,前面代码中已经用python的第三方库实现了截图功能,但在上线以后出现了一些bug,所以就改bug的任务就落在了 ...

  3. 程序员快围观！2016年最受欢迎中国开源软件TOP 20

    [PConline 资讯]开源软件对程序员来说是一个经常接触的软件,作为一个经常接触的软件,当然想知道自己用的软件受欢迎程度,基于此,开源中国在近日公布"2016年度最受欢迎中国开源软件评选 ...

  4. 一个简单的使用restc demo

    最近不经意间看到饿了么团队开发的restc,接口调试工具(类似postman),其实调试接口都没用过工具,每次都只是运行起项目直接调接口.闲来无事,看到restc,就决定试试,后面觉得挺不错的,就分享 ...

  5. iOS开发-OC语言 (七)继承、多态、类别

    继承.多态.类别 学习目标 1.继承的含义 2.父类子类的别称 3.字段和消息的继承 4.重写和重写消息的调用 5.多态 6.类别(Category) ======================== ...

  6. hibernate-部分字段查询方案

    hibernate的延迟加载与本列记录不一样,延迟加载正常一般用于关联字段,或者大型字段使用. 本列的情况主要用于,某一张表有几十甚至上百个字段,例如财务报表等.但是在使用某些场景是却大多只是用其10 ...

  7. ListView添加节点

    ListView插入节点的流程 当ListView控件的样式被设置成report时,ListView控件实际上是分为两个部分, 一部分是Column, 这个部分是用来显示ListView的每一列的标题 ...

  8. mysql添加mcafee 审计插件

    插件源码地址https://github.com/mcafee/mysql-audit插件安装方法https://github.com/mcafee/mysql-audit/wiki/Installa ...

  9. XMLHttpRequest上传文件实现进度条

    话不多说,直接上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  10. SUSElinux的pam模块中$ISA变量的作用

    目的:限制非wheel用户切换至root 方法:vi /etc/pam.d/su文件,增加如下两行 auth sufficient /lib/security/pam_rootok.soauth re ...