js后期调用,javascript后期调用_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

js后期调用,javascript后期调用

来源：未知作者：类型：文章教程点击次数：发布时间：2014-12-01 13:30:50

先看下面的例子，点击图片，用循环依次弹出五个数字，对应五张图片。下面的代码看似没问题，但是弹出来就有问题了，您可以先运行代码，点击demo的五张图片，查看问题所在：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>js的后期调用测试demo1 - 我爱模板网</title> <script language="javascript"> function addImageHandlers() { var imageElements = document.getElementsByTagName("img"); for (var i=0; i<imageElements.length; i++) { imageElements[i].onclick = function(){ alert(i); } } } </script> </head> <body onLoad="addImageHandlers();"> <div id="images"> <ul> <li><a href="#"><img src="http://www.5imoban.net/view/demoimg/r_song1.jpg" /></a></li> <li><a href="#"><img src="http://www.5imoban.net/view/demoimg/r_song2.jpg" /></a></li> <li><a href="#"><img src="http://www.5imoban.net/view/demoimg/r_song3.jpg" /></a></li> <li><a href="#"><img src="http://www.5imoban.net/view/demoimg/r_song4.jpg" /></a></li> <li><a href="#"><img src="http://www.5imoban.net/view/demoimg/r_song5.jpg" /></a></li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

经过测试，发现，弹出来的都是5，无论点击哪张，而不是期望的，点击哪张图片就弹出对应的数字。这可以用js的自定义属性来解决：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>js的后期调用测试demo2 - 我爱模板网</title> <script language="javascript"> function addImageHandlers() { var imageElements = document.getElementsByTagName("img"); for (var i=0; i<imageElements.length; i++) { imageElements[i].zz=i; imageElements[i].onclick = function(){ alert(this.zz); } } } </script> </head> <body onLoad="addImageHandlers();"> <div id="images"> <ul> <li><a href="#"><img src="http://www.5imoban.net/view/demoimg/r_song1.jpg" /></a></li> <li><a href="#"><img src="http://www.5imoban.net/view/demoimg/r_song2.jpg" /></a></li> <li><a href="#"><img src="http://www.5imoban.net/view/demoimg/r_song3.jpg" /></a></li> <li><a href="#"><img src="http://www.5imoban.net/view/demoimg/r_song4.jpg" /></a></li> <li><a href="#"><img src="http://www.5imoban.net/view/demoimg/r_song5.jpg" /></a></li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

经过上面的测试，的确解决了。可是第一个例子，为什么弹出来的都是5，而不是一张图片对应一个数字呢。什么时候才调用函数来执行alert呢？当鼠标点击的时候，也就是onclick的时候。问题的产生就在这时候：此时for循环早就执行完了，i的值已经定格在5了，所以不管点击哪一张图片，跳出的数字都是5。这就是后期调用产生的问题。