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数据类型: 字符串值是一个由零个或 ...
随机推荐
- 跟Google学习Android开发-起始篇-用碎片构建一个动态的用户界面（3）
4.3 构建一个灵活的用户界面 当设计你的应用程序要支持大范围的屏幕尺寸时,你可以在不同的布局配置中重用碎片,来根据可用的屏幕空间优化用户体验. 例如,在手持设备上,它可能是适应来在一个单窗格用户界面 ...
- Install Oracle 10g on Red Hat Linux 5.3 Step by Step
一.虚拟机配置 1. 虚拟机(VBox 4.3.12) 2. 配置虚拟机网卡网络.选择host-only.VirtualBox Host-Only Network网卡IP为设置为192.168.1.1 ...
- [Angular 2] ngrx/store
@ngrx/store builds on the concepts made popular by Redux and supercharges it with the backing of RxJ ...
- android系统360浏览器使用append动态添加元素出现黑色错乱背景
去掉样式 backface-visibility:hidden;
- tomcat startup.sh提示java.lang.OutOfMemoryError: PermGen space
JAVA_OPTS="-server -XX:PermSize=512M -XX:MaxPermSize=1024m"if [ -z "$LOGGING_MANAGER& ...
- （转）委托的N种写法，你喜欢哪种？
原文:http://www.cnblogs.com/FreeDong/archive/2013/07/31/3227638.html 一.委托调用方式 1. 最原始版本: delegate strin ...
- java中保留几位小数
public class NumUtils { /** * 保留两位小数 * * @param d * @return */ public static String get2Wei(double d ...
- 用POP动画引擎实现弹簧动画(POPSpringAnimation)
效果图: #import "ViewController.h" #import <POP.h> @interface ViewController () @proper ...
- DWZ简介及其使用
来源:http://blog.csdn.net/t123012009065/article/details/8286826 DWZ简介: DWZ富客户端框架(jQuery RIA framewor ...
- redux-simple 简化版的redux
作为react的粉丝,当然要吐槽一下react组件通信问题.react的单向数据流是组件通信的一大阻碍,只允许父组件向子组件传值,子组件向父组件传值只能通过父组件向子组件传递回调函数实现.如果在深层次 ...