绑定事件变量作用域的有关问题-JavaSript-爱易网页

绑定事件变量作用域的有关问题

日期：2014-05-16　浏览次数：20356 次

绑定事件变量作用域的问题



<!DOCTYPE HTML>

<html>

	<head>

		<title> new document </title>

		<meta charset="utf-8">

		<style>

			*{margin:0px; padding:0px;}

			#head{width:100%; height:40px; background-color:gray;}

			#head nav ul li{display:block;}

			.dropdown{width:80px; height:30px; float:left;background-color:black;color:#FFFFFF; margin:10px;}

			.dropdown_menu{display:none;}

		</style>

	</head>



	<body>

		<header id="head">

			<nav id="head_nav">

				<ul id="nav_menu">

					<li class="dropdown">

						<a>Home</a>

					</li>

					<li class="dropdown">

						<a>MENU 1</a>

						<ul class="dropdown_menu">

							<li>111111</li>

							<li>222222</li>

						</ul>

					</li>

					<li class="dropdown">

						<a>MENU 1</a>

						<ul class="dropdown_menu">

							<li>111111</li>	

							<li>222222</li>

						</ul>

					</li>

				</ul>

			</nav>

		</header>



		<script>

			document.body.onload = function(){

				var dropdowns = document.getElementsByClassName('dropdown');

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

					d = dropdowns[i];

					dropdowns[i].onmouseover = function(){

						alert('d='+d.innerHTML);//正常输出innerHTML

						alert('dropdowns[i]='+dropdowns[i]);//输出undefined

					}

				}

			}

		</script>

	</body>

</html>

var js

------解决方案--------------------
alert('d='+d.innerHTML);//正常输出innerHTML

d没传过去，肯定是undefined
------解决方案--------------------
闭包的问题~~

在鼠标划过li元素的时候，事件函数开始执行，但要注意的是：事件函数里的i值为dropdowns.length（在这里是3）而不是当前li对应的索引。就是说，你不论划过的是哪个li，弹出的永远是“'dropdowns[i]='+dropdowns[3]”,dropdowns[3]是不存在的，所以最后弹出的值为：‘dropdowns[i]=undefined’。

mouseover事件函数中的i是包含它的onload函数中的i,当mouseover事件函数执行时i只会取它在onload函数执行后的最终值。

楼主可以google一下“js闭包活动对象”.

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

绑定事件变量作用域的有关问题

相关资料更多>

推荐阅读更多>