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数据类型: 字符串值是一个由零个或 ...
随机推荐
- 在 iPad和 iPhone的浏览器上查看网页源代码
今天使用iPad 处理OA上的问题,有个窗口不能正常工作,想查看一下源码,发现iPad中的 Safari和chrome 没有内置查看源码功能.查了几个资料,遇到的又是没抄全的,下面是safari的设置 ...
- rk3288 ov8858 camera移植
平台:瑞芯的rk3288 SDK:4.4/5.0/5.1 作者:fulinux *****本文同意转载.只是请注明出处:http://blog.csdn.net/fulinus**** rk3288的 ...
- 自定义控件【圆形】圆角 BitmapShader
关于缩放比例 本例中,我们会为BitmapShader设置了一个matrix,目的是按比例放大或者缩小bitmap,并移动到View控件的中心,我们不会让view的宽高大于我们bitm ...
- 用户 'IIS APPPOOL\ExportExcel' 登录失败。
解决了前两个错误,在成功打开项目后,在访问数据库又越到如下错误 “/”应用程序中的服务器错误. 用户 'IIS APPPOOL\ExportExcel' 登录失败. 说明: 执行当前 Web 请求期间 ...
- 使用FileResult返回浏览器文件及乱码问题解决
一.向客户端发送文件方法 Asp.Net 中返回文件方法 public void TxtFile(string filename) { //html文件 string path = @"E: ...
- Mysql锁机制介绍
Mysql锁机制介绍 一.概况MySQL的锁机制比较简单,其最显著的特点是不同的存储引擎支持不同的锁机制.比如,MyISAM和MEMORY存储引擎采用的是表级锁(table-level locking ...
- component object model(组件对象模型)
通常,COM是以 win32动态链接库(dll)或可执行文件(exe)的形式发布. 在COM中,接口就是一切,对于客户来说,一个组件就是一个接口集.COM接口是一个包含一个函数指针数组的内存结构. 组 ...
- iOS 改变UITextField中光标颜色
第一种: [[UITextField appearance] setTintColor:[UIColor blackColor]]; 这个方法会影响整个app的所有UITextFiled... 第二种 ...
- UITableView出现卡顿如何处理
tableView的beginUpdate和endUpdate要比reloadData和reloadRowsAtIndexPaths好,因为beginUpdate和endUpdate会执行一个动画bl ...
- Linux Shell脚本编程－－sed命令详解
简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区的 ...