关于window.onload事件的问题

baidu_35804815 2016-08-06 08:56:13

我在调试的时候发现window.onload在html加载完成后for循环就执行过了，然后我点击页面上的按钮，为什么浏览器能找到我点击的是哪个按钮？难道fn1又执行了一次？请教大家下这个原理

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script type="text/javascript">

	window.onload=function(){

		var oUl=document.getElementById("list");

		var aLi=oUl.getElementsByTagName("li");



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

			fn1(aLi[i]);

		}



		function fn1(oLi){

			var oBtn=oLi.getElementsByTagName("input");

			var oStrong=oLi.getElementsByTagName("strong")[0];

			var oEm=oLi.getElementsByTagName("em")[0];

			var oSpan=oLi.getElementsByTagName("span")[0];

			var num=parseInt(oStrong.innerHTML);

			var price=parseFloat(oEm.innerHTML);



			oBtn[0].onclick=function(){

				num--;

				if(num<0){

					num=0;

				}

				oStrong.innerHTML=num;

				oSpan.innerHTML=num*price;

			}

			oBtn[1].onclick=function(){

				num++;

				oStrong.innerHTML=num;

				oSpan.innerHTML=num*price;

			}

		}

	}

	

	</script>

</head>

<body>

	<ul id="list">

		<li>

			<input type="button" value="+">

			<strong>0</strong>

			<input type="button" value="-">

			单价：<em>12.5</em>元 

			小计<span>0</span>元

		</li>

		<li>

			<input type="button" value="+">

			<strong>0</strong>

			<input type="button" value="-">

			单价：<em>11.5</em>元 

			小计<span>0</span>元

		</li>

		<li>

			<input type="button" value="+">

			<strong>0</strong>

			<input type="button" value="-">

			单价：<em>9.5</em>元 

			小计<span>0</span>元

		</li>

</body>

</html>

...全文

267 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

baidu_35804815 2016-08-07

打赏
举报

引用 5 楼 net_lover 的回复:

因为oBtn定义在click事件处理函数的外面，因此oBtn对click处理事件函数来说，相当于局部的全局作用域，是可以找到oBtn定义的，fn1只执行一次，不会每次点击都执行的。作用域的概念可以参考教程 http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html

看了作用域好像有点明白了

孟子E章 2016-08-07

打赏
举报

因为oBtn定义在click事件处理函数的外面，因此oBtn对click处理事件函数来说，相当于局部的全局作用域，是可以找到oBtn定义的，fn1只执行一次，不会每次点击都执行的。作用域的概念可以参考教程 http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html

baidu_35804815 2016-08-06

打赏
举报

引用 3 楼 csdn_liuxinhao 的回复:

你的for循环在window.onload 里面肯定是页面加载完就执行了，function fn1 会在你触发该事件后在执行，你的button 没有区分。var oBtn=oLi.getElementsByTagName("input"); 这就代表你所有的button 按钮都拥有该事件，所以不管你按的哪一个按钮都会促发fn1

是不是for循环执行完了后内存中存在着fn1(aLi[0])、fn1(aLi[1])、fn1(aLi[2])这几个函数，然后等我button按下去的时候再去调用相应的函数？

admin_3 2016-08-06

打赏
举报

你的for循环在window.onload 里面肯定是页面加载完就执行了，function fn1 会在你触发该事件后在执行，你的button 没有区分。var oBtn=oLi.getElementsByTagName("input"); 这就代表你所有的button 按钮都拥有该事件，所以不管你按的哪一个按钮都会促发fn1

baidu_35804815 2016-08-06