0级DOM行内嵌套样式注册事件，事件函数在onload里面声明报错

先上代码说现象

<body>
	<button class="btn" onclick = "rest(100)">按钮</button>
</body>
<script>
	window.onload=function(){
		var rest = function(i){
			alert(i);
		}
	}
</script>

　　在body里面放一个按钮button，给其注册一个点击事件，事件函数是rest，函数rest在javascript的onload事件里面声明。最后浏览器会报错：Uncaught ReferenceError: rest is not defined，函数

rest未找到。

原因分析

　　首先说明一下onload事件，onload是在文档树结构与所有的文件加载完后自动执行的一个事件函数，在该事件函数执行时意为文档已经全部加载完成。大部分人也许知道这个0级DOM事件所存在的错误现

象，但是都被onload“字面量”所迷惑而不知道真实的原因；

　　在这里，其实的最大的问题还是在于函数作用域的问题，说白了就是0级DOM的执行函数rest在js的onload加载事件中声明的，而这个0级的DOM事件是在js的onload加载事件之外注册的；所以不管这个onload加

载事件函数执行与否都不会影响浏览器的执行结果。按照函数作用域的搜索原则，函数外部的其他函数不能调用该函数内部的变量（在ECMAscript语法中函数也是变量），这里的错误就是0级DOM事件调用的是

同级onload加载事件的事件函数内部声明的函数，所以报rest is not defined也就理所应然了。

发现原因修改代码

1.放在全局处声明事件执行函数

<body>
	<button class="btn" onclick = "rest(100)">按钮</button>
</body>
<script>
	window.onload=function(){
	/*加载事件函数内部*/
	}
	//在全局处声明函数
	var rest = function(i){
		alert(i);
	}
</script>

2.在加载事件内部绑定0级DOM事件

<body>
	<button class="btn" >按钮</button>
</body>
<script>
	window.onload=function(){
		/*加载事件函数内部*/
		var rest = function(i){
			alert(i);
		}
		/*给DOM对象绑定事件函数，函数主体执行rest函数*/
		document.querySelector(".btn").onclick = function(){
			rest(1000)
		};
	}	
</script>

以上是个人理解与解释这个问题，如有更好的解释或本博客有不足之处请不吝指出，谢谢。