<!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. Html+Css实现九大行星动画效果

    前段时间项目中需要开发一个3D效果的环形菜单类似行星旋转,折腾了好久弄出了个样子,但是最后客户改版了不需要了,好不容易弄出来的吊炸天的效果不能这么浪费了, 今年神舟十一号载人飞船顺利发射成功,中国航天 ...

  2. PB导出规定格式DBF文件

    最近在做一个给卫计委做数据上报的数据接口,接口要求使用奇葩的dBase 3数据库存储上报数据,忙活了几天总算搞好了,使用开发工具为powerbuild 12,222个字段的上报数据表生成DBF文件,写 ...

  3. Linux实战教学笔记10:正则表达式

    第十节 正则表达式 标签(空格分隔):Linux实战教学笔记 ---更多资料点我查看 第1章 什么是正则表达式 正则表达式就是为了处理大量的文本|字符串而定义的一套规则和方法 通过定义的这些特殊符号的 ...

  4. 如何安装并使用bower包依赖工具

    什么是bower Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源.其他一些建立在Bower基础之上的开发工具,如YeoMan和 ...

  5. 【JS学习笔记】函数传参

    比如仅仅改变背景的颜色 函数传参:参数就是占位符. 那么在什么时候用传参呢?函数里定不下来的东西. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  6. Day1 老男孩python自动化运维课程学习笔记

    2017年1月7日老男孩python自动化运维课程正式开课 第一天学习内容: 上午 1.python语言的基本介绍 python语言是一门解释型的语言,与1989年的圣诞节期间,吉多·范罗苏姆为了在阿 ...

  7. JSON 与 对象 、集合 之间的转换

    JSON字符串和java对象的互转[json-lib]   在开发过程中,经常需要和别的系统交换数据,数据交换的格式有XML.JSON等,JSON作为一个轻量级的数据格式比xml效率要高,XML需要很 ...

  8. tnvm 安装模块不能找到关联模块问题

    export NODE_PATH='/Users/yuqi/.tnvm/lib/node_modules' export PATH='/Users/yuqi/.tnvm/bin':$PATH sour ...

  9. Selenium WebDriver多层表单切换

    [Java] 首先 测试网站frame结构为 -topframe: -centerframe: -leftframe: -mainframe: -bottomframe: 我当时遇到的问题是,首先在c ...

  10. LeetCode 476. Number Complement

    Given a positive integer, output its complement number. The complement strategy is to flip the bits ...