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数据类型: 字符串值是一个由零个或 ...
随机推荐
- 淘宝数据库OceanBase SQL编译器部分 源代码阅读--Schema模式
淘宝数据库OceanBase SQL编译器部分 源代码阅读--Schema模式 什么是Database,什么是Schema,什么是Table,什么是列,什么是行,什么是User?我们能够能够把Data ...
- honeywell D6110开发的一个工厂仓库追溯识别
近日.接触并开发了一个用honeywell D6110 二维扫描PDA的项目,应用也比較简单. 就是货品物料编码.通过中间码相应,然后中间码再依照不同OEM品牌须要生成各种商品条码并带有流水号. 要求 ...
- 隐藏Activity标题栏
<span style="font-size:18px;"> </span> 要让Activity的标题栏不被显示的情况分两种: 一.不显示标题栏的不论什么 ...
- 用Hexo搭建属于自己的Blog
什么是Hexo 简单的来说,Hexo是一款基于Node.JS的静态博客框架,官方给它的描述是"A fast, simple & powerful blog framework&quo ...
- Linux 基础入门----推荐课程
Linux 基础入门课程:https://www.shiyanlou.com/courses/1 很好的一门Linux基础课,精炼.简洁!推荐! 课程内容: 第1节 Linux 系统简介 https: ...
- nginx 站点80跳443配置
server { listen 80; server_name www.furhacker.cn; location /{# return 301; rewrite ^(.*)$ https://$h ...
- Ubuntu 11.10开启root用户登陆
以管理员身份运行 #sudo gedit /etc/lightdm/lightdm.conf 将里面改成 "autologin-user=root" 就可以以root用户登录了
- AFNetworking3.0出现Error Domain=com.alamofire.error.serialization.response Code=-1016 "Request failed: unacceptable
在发送请求后一直报错, 浏览器解析却没有问题, 所以基本可以确定是AFNetworking的问题 下面是解决方法: AFHTTPSessionManager *manager = [AFHTTPSes ...
- [转]C++堆和栈的区别
一.预备知识―程序的内存分配 一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)― 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈. ...
- assert实现
测试网站在国内国外的访问速度 关于C的右左法则 assert宏的实现(一道笔试题) 2010-11-09 13:05:48| 分类: c | 标签: |举报 |字号大中小 订阅 asser ...