• 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>	
    

      

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

  • 相关阅读:
    poj 2488 DFS
    畅通工程 并查集模版
    KMP 模板
    poj 1426 DFS
    poj 2528 线段数
    poj 3468 线段数 修改区间(点)
    CVPR2012文章阅读(2)A Unified Approach to Salient Object Detection via Low Rank Matrix Recovery
    如何制定目标
    Saliency Map 最新综述
    计算机视觉模式识别重要会议杂志
  • 原文地址:https://www.cnblogs.com/suzhen-2012/p/5708168.html
Copyright © 2020-2023  润新知