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

      

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

  • 相关阅读:
    使用 Jackson – 将字符串转换为 JsonNode 对象
    Java 8 及其后续版本的新遍历 forEach
    IntelliJ IDEA 快速插入 for 循环
    在 Discourse 中如何使用输入对话框
    如何修改 Discourse 的域名
    Confluence 数据中心版本接近生命周期了
    IntelliJ IDEA 中如何将 POM 中的版本号快速提出为属性
    RedHat 8 如何检查端口是否联通
    二、RabbitMq安装
    一、RabbitMQ 的概念
  • 原文地址:https://www.cnblogs.com/suzhen-2012/p/5708168.html
Copyright © 2020-2023  润新知