当前位置：首页 → 问答吧 → 用for循环绑定事件好像不行？？

用for循环绑定事件好像不行？？

时间：2010-05-07

来源：互联网

想要的效果是每当鼠标悬停在某一个区域时，显示这个区域的数字，很简单的效果，但用for循环却遇到了问题。。。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> ul{list-style:none;} li{width:100px;background:#F30;margin:1px;float:left;text-align:center;} </style> </head> <body> <ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> </ul> </body> <script> var li=document.getElementsByTagName('li'); for(var i=0;i<li.length;i++){ li[i].onmouseover = function(){ alert(i); } } </script> </html>
提示：您可以先修改部分代码再运行

如果不用for循环，是很容易实现。。。。但要一个一个的写。。。难道没有更好的办法？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> ul{list-style:none;} li{width:100px;background:#F30;margin:1px;float:left;text-align:center;} </style> </head> <body> <ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> </ul> </body> <script> var li=document.getElementsByTagName('li'); li[0].onmouseover = function(){ alert(0); } li[1].onmouseover = function(){ alert(1); } li[2].onmouseover = function(){ alert(2); } li[3].onmouseover = function(){ alert(3); } </script> </html>
提示：您可以先修改部分代码再运行

作者: KOEN301 发布时间: 2010-05-07

参数生命周期的问题。。当所有的li 都获得了onmouseover 事件了以后，i 的值已经被循环到了4 ，所以当你鼠标移上去，就只会显示4，换个写法吧，当然也可以不用innerHTML ，给每个li 设个id 啊，title 啊。什么的属性，然后alert 出来也可以。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> ul{list-style:none;} li{width:100px;background:#F30;margin:1px;float:left;text-align:center;} </style> </head> <body> <ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> </ul> </body> <script> var li=document.getElementsByTagName('li'); for(var i=0;i<li.length;i++){ li[i].onmouseover = function(){ alert(this.innerHTML); } } </script> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 isayno 于 2010-5-7 10:44 编辑 ]

作者: isayno 发布时间: 2010-05-07

你那样写，FOR循环过后I值就是3了。
用这种方法吧~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> ul{list-style:none;} li{width:100px;background:#F30;margin:1px;float:left;text-align:center;} </style> </head> <body> <ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> </ul> </body> <script> var li=document.getElementsByTagName('li'); for(var i=0;i<li.length;i++){ li[i].onmouseover = (function(i){ return function(){alert(i)} })(i); } </script> </html>
提示：您可以先修改部分代码再运行

作者: sBai 发布时间: 2010-05-07

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> ul{list-style:none;} li{width:100px;background:#F30;margin:1px;float:left;text-align:center;} </style> </head> <body> <ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> </ul> <script> function A(){ alert(this['I']); } var li=document.getElementsByTagName('li'); for(var i=0;i<li.length;i++){ li[i]['I'] = i; li[i].onmouseover = A; } </script> </body> </html>
提示：您可以先修改部分代码再运行

作者: faeng220 发布时间: 2010-05-07

2楼确实如你所说的，现在明白了，不过我目的是调用函数中的i^_^
3楼的实现方法非常好，不过不是很明白。。。
4楼版主是用了数组的原理吗？也不是很明白，研究中。。。。

谢谢大家~~~

作者: KOEN301 发布时间: 2010-05-07

4楼的大意是，给每个li 在生成onmouseover 的同时加上一个属性：I，I 的值为当时的i值。

作者: isayno 发布时间: 2010-05-07

引用:

原帖由 isayno 于 2010-5-7 13:08 发表
4楼的大意是，给每个li 在生成onmouseover 的同时加上一个属性：I，I 的值为当时的i值。

晕，原来是这样，谢谢楼上

如果这样写就明白多了。。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> ul{list-style:none;} li{width:100px;background:#F30;margin:1px;float:left;text-align:center;} </style> </head> <body> <ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> </ul> <script> function A(){ alert(this.I); } var li=document.getElementsByTagName('li'); for(var i=0;i<li.length;i++){ li[i].I = i; li[i].onmouseover = A; } </script> </body> </html>
提示：您可以先修改部分代码再运行

作者: KOEN301 发布时间: 2010-05-07

用for循环绑定事件好像不行？？

引用:

热门阅读

热门下载