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数据类型: 字符串值是一个由零个或 ...
随机推荐
- Object -C 数组 -- 笔记
// // main.m // Array // // Created by facial on 23/8/15. // Copyright (c) 2015 facial_huo. All ...
- Unity3D基础学习 利用NGUI的Texture播放视频
利用NGUI播放视频,首先你得导入你的视频 你的电脑中必须安装QuickTime软件,没有,去下一个,如果是Windows系统,安装完之后重启. 接下来转换你的视频格式,如果你的视频在QuickTim ...
- poj 1964 Cow Cycling（dp）
/* 一开始想的二维的 只维护第几只牛还有圈数 后来发现每只牛的能量是跟随每个状态的 所以再加一维 f[i][j][k]表示第i只牛 领跑的j全 已经消耗了k体力 转移的话分两类 1.换一只牛领跑 那 ...
- 秒味课堂Angular js笔记------Angular js中的工具方法
Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...
- maven第5章坐标和依赖
5.5依赖范围 runtime:运行时依赖范围 举的例子是JDBC驱动实现,不理解? 编译的时候只需要引入jdk提供的jdbc类和方法,比如java.sql.*;这时编译没有报错,但是没有引入mysq ...
- no drawer view found with gravity RIGHT(Android实现侧滑菜单从右面滑出) 解决办法
代码如下: <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width ...
- java rmi 小记
最近在搞Quartz任务监控管理,碰到了jmx,后来发现Quartz对jmx的支持不是很好,介绍的文档也比较少,另外Quartz可以很方便的支持rmi于是就看了一下rmi.下面把写的一些测试小例子附上 ...
- Property type 'id<tabBarDelegate>' is incompatible with type 'id<UITabBarDelegate> _Nullable' inherited from 'UITabBar'
iOS报错:Property type 'id' is incompatible with type 'id _Nullable' inherited from 'UITabBar' 如图: 可能原因 ...
- "float: left;" div 不换行显示
<div id='p'> <div id='c1'> </div> <div id='c2'> </div> <div id='c3' ...
- javascript之闭包深入理解（一）
曾经在开始学习javascript的时候,很是不理解闭包的概念.今天想对它详细的剖析. 在说清楚闭包之前,必须先清楚作用域链. 作用域链 我们知道,执行环境是js中最为重要的一个概念.执行环境定义了变 ...