JavaScript方法undefined/null原因探究及闭包简单实现
昨天一个刚写前端不久的同学发消息问这个问题（如下图）：
HTML代码为（省略部分代码）：
<head>
<script src="test.js"></script>
</head>
<body>
<div id="output">0</div>
<button id="plus">+1</button>
<button id="minus">-1</button>
</body>
test.js最初代码为：
var plus=document.getElementById('plus');
var minus=document.getElementById('minus');
var output=document.getElementById('output');
plus.addEventListener('click',function(){
console.log('+1');
},false);
结果就为控制台报出了“Uncaught TypeError: Cannot read property 'addEventListener' of null”的错误，究其原因，是因为在HTML的DOM结构未加载完成时，就已经加载好js文件，并对DOM元素进行绑定事件操作，因此不能会报出null的错误，有时也可能会出现undefined的错误。
解决这个问题的方法，可以从以下两种方式就行考虑：
一、在HTML文件中将<script>放在DOM最后加载，即：
<body>
<div id="output">0</div>
<button id="plus">+1</button>
<button id="minus">-1</button>
<script src="test.js"></script>
</body>
二、在js代码块放到window.onload事件中，待基本文档结构加载完成后再执行事件绑定：
window.onload = function() {
var plus = document.getElementById('plus');
var minus = document.getElementById('minus');
var output = document.getElementById('output');
plus.addEventListener('click', function() {
console.log('+1');
}, false);
}
当然了，这个也可以用jQuery的ready函数做，原理类似。PS：前些天面试时遇到了这样一个问题：说一说DOMContentLoaded事件、onload事件和jq的ready事件，实际上是有所区别的，一篇博文就说说这个问题，先留个坑。
然后这个问题就解决掉了，下面就是完成功能了，要求按“+1”按钮时，数字+1；按“-1”按钮时，数字-1；
当然了，这个问题比较容易，了解下作用域和闭包就能写出来了，也给同学做了出来。HTML代码还是如上，下面是完整的JavaScript代码：
window.onload = function() {
var plus = document.getElementById('plus');
var minus = document.getElementById('minus');
var output = document.getElementById('output');
var num=output.innerText;
var count = function(event){
var target=event.target;
switch(target.id){
case 'plus':
num++;
output.innerText=num;
break;
case 'minus':
num--;
output.innerText=num;
break;
}
};
document.addEventListener('click',count,false);
}
最终运行效果如下：
JavaScript方法undefined/null原因探究及闭包简单实现的更多相关文章
- JavaScript 中undefined,null,NaN的区别
1.类型分析: js中的数据类型有undefined,boolean,number,string,object等5种,前4种为原始类型,第5种为引用类型.var a1;var a2 = true;va ...
- javascript的Undefined,null区别
//在javascript中null表示“什么都没有” ,是一个特殊的类型,表示一个空对象引用: var person = null; //值为null(空),但类型为对象 console.log(p ...
- JavaScript：undefined!=false之解 及==比较的规则
JS中有一个基本概念就是: JavaScript中undefined==null 但undefined!==null undefined与null转换成布尔值都是false 如果按照常规想法,比如下面 ...
- javascript类型系统——undefined和null
× 目录 [1]原因 [2]undefined [3]null 前面的话 一般的程序语言,表示空的只有null,但javascript的设计者Brendan Eich却设计了一个undefined,这 ...
- JavaScript中undefined与null的区别
通常情况下, 当我们试图访问某个不存在的或者没有赋值的变量时,就会得到一个undefined值.Javascript会自动将声明是没有进行初始化的变量设为undifined. 如果一个变量根本不存在会 ...
- 【转】JavaScript中undefined与null的区别
通常情况下, 当我们试图访问某个不存在的或者没有赋值的变量时,就会得到一个undefined值.Javascript会自动将声明是没有进行初始化的变量设为undifined. 如果一个变量根本不存在会 ...
- 悟透Javascript undefined,null,"",0这四个值转换为逻辑值时就是false &this关键字
话题一:undefined,null,"",0这四个值转换为逻辑值时就是false 也就是在if判断时会把上面的五个作为false来判断.但是它们的类型确是不尽相同的,如下所示. ...
- 浅谈JavaScript中的null和undefined
浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...
- JavaScript的undefined与null、NaN的区别
Javascript的数据类型 在JavaScript中,有三种住数据类型.两种复合数据类型和两种特殊数据类型. 1.主数据类型(基元数据类型) 字符串 String数据类型: 字符串值是一个由零个或 ...
随机推荐
- svn解决冲突 Aborting commit: 'XXXXXXXX'remains in conflict错误
如果你遇到冲突,三件事你可以选择: “手动”合并冲突文本(检查和修改文件中的冲突标志). 用某一个临时文件覆盖你的工作文件. 运行svn revert <filename>来放弃所有的修改 ...
- [C#技术] .NET平台开源JSON库LitJSON的使用方法
一个简单示例: String str = "{’name’:’cyf’,’id’:10,’items’:[{’itemid’:1001,’itemname’:’hello’},{’itemi ...
- JDK动态代理实现简单AOP--转
JDK 动态代理是 java 反射的一个重要特性.它在某种方面为 java 提供了动态性的特性,给应用带来了无限的空间.大名鼎鼎的 Hessian . Spring AOP 基于动态代理实现.本文将简 ...
- Array.asList:数组转list时你一定要知道的“陷阱”！
最近开发中,业务上处理,经常用到asList方法,这让我不经想起了它的很多容易让人犯错的地方或者误解的地方,所以就想抽出时间来,整理一下,和大家分享出来,深夜了,话不多说,主要以代码为主,简易的代码, ...
- 矩阵快速幂(入门) 学习笔记hdu1005, hdu1575， hdu1757
矩阵快速幂是基于普通的快速幂的一种扩展,如果不知道的快速幂的请参见http://www.cnblogs.com/Howe-Young/p/4097277.html.二进制这个东西太神奇了,好多优秀的算 ...
- 使用__doPostBack函数来达到使用客户端的控件来调用服务器端的函数的--小结
类比LinkButton按钮 LinkButton前台生成代码: JS代码: //<![CDATA[ var theForm = document.forms['form1']; if (!th ...
- phpMyAdmin配置及 错误 缺少 mysqli 扩展。请检查 PHP 配置
PHPMyadmin配置文件config.inc.php内容如下,在需要设置的地方增加了相关注释. 非常适合对数据库操作命令不熟悉的数据库管理者,下面我就说下怎么安装该工具: 1.先到网上下载 ...
- SQL Server 和CLR集成
通过在 Microsoft SQL Server 中托管 CLR(称为 CLR 集成),可以在托管代码中编写存储过程.触发器.用户定义函数.用户定义类型和用户定义聚合函数. 因为托管代码在执行之前会编 ...
- Shell中IFS用法
一 .IFS的介绍 Shell 脚本中有个变量叫IFS(Internal Field Seprator) ,内部域分隔符.完整定义是The shell uses the value stored ...
- js的相关验证
1 var JavaScriptCommon = { /*身份证号码校验*/ VerifyID: function (socialNo) { if (socialNo == "") ...