昨天一个刚写前端不久的同学发消息问这个问题（如下图）：

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原因探究及闭包简单实现的更多相关文章

  1. JavaScript 中undefined,null,NaN的区别

    1.类型分析: js中的数据类型有undefined,boolean,number,string,object等5种,前4种为原始类型,第5种为引用类型.var a1;var a2 = true;va ...

  2. javascript的Undefined,null区别

    //在javascript中null表示“什么都没有” ,是一个特殊的类型,表示一个空对象引用: var person = null; //值为null(空),但类型为对象 console.log(p ...

  3. JavaScript：undefined!=false之解 及==比较的规则

    JS中有一个基本概念就是: JavaScript中undefined==null 但undefined!==null undefined与null转换成布尔值都是false 如果按照常规想法,比如下面 ...

  4. javascript类型系统——undefined和null

    × 目录 [1]原因 [2]undefined [3]null 前面的话 一般的程序语言,表示空的只有null,但javascript的设计者Brendan Eich却设计了一个undefined,这 ...

  5. JavaScript中undefined与null的区别

    通常情况下, 当我们试图访问某个不存在的或者没有赋值的变量时,就会得到一个undefined值.Javascript会自动将声明是没有进行初始化的变量设为undifined. 如果一个变量根本不存在会 ...

  6. 【转】JavaScript中undefined与null的区别

    通常情况下, 当我们试图访问某个不存在的或者没有赋值的变量时,就会得到一个undefined值.Javascript会自动将声明是没有进行初始化的变量设为undifined. 如果一个变量根本不存在会 ...

  7. 悟透Javascript undefined,null,"",0这四个值转换为逻辑值时就是false &this关键字

    话题一:undefined,null,"",0这四个值转换为逻辑值时就是false 也就是在if判断时会把上面的五个作为false来判断.但是它们的类型确是不尽相同的,如下所示. ...

  8. 浅谈JavaScript中的null和undefined

    浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...

  9. JavaScript的undefined与null、NaN的区别

    Javascript的数据类型 在JavaScript中,有三种住数据类型.两种复合数据类型和两种特殊数据类型. 1.主数据类型(基元数据类型) 字符串 String数据类型: 字符串值是一个由零个或 ...

随机推荐

  1. Liferay 6.1开发学习

    http://www.huqiwen.com/2013/01/10/liferay-6-1-development-study-17-springmvc-portlet/ http://www.blo ...

  2. Java经典23种设计模式之结构型模式(一)

    结构型模式包含7种:适配器模式.桥接模式.组合模式.装饰模式.外观模式.享元模式.代理模式. 本文主要介绍适配器模式和桥接模式. 一.适配器模式(Adapter) 适配器模式事实上非常easy.就像手 ...

  3. HDU -2524 矩形A + B

    找规律题,这种题目比较巧妙,要仔细观察找出规律 1. 假设只有一行,一共有n列,那么由一个小矩形构成的矩形个数为n, 由两个小矩形构成的矩形个数为 n - 1个 .... 由 n 个小矩形构成的矩形个 ...

  4. sql循环遍历

    <sql id="Example_Where_Clause" > <!-- WARNING - @mbggenerated This element is aut ...

  5. 计算方法（二）用C#实现数值积分

    在工程中,经常会遇到积分问题,这时原函数往往都是找不到的,因此就需要用计算方法的数值积分来求. public class Integral { /// <summary> /// 梯形公式 ...

  6. return;，return false，return true----------浅析

    作为新手,一直没注意他们的区别,今天特意在网上搜了搜. 1: retuen; 无返回值,表示终止函数往下执行 2: return true; a.返回 bool值 真 b.提交表单 针对<but ...

  7. spring aop原理分析

    持续更新... aop跟java代理模式有关. java.lang.reflect.Proxy java.lang.reflect.InvocationHandler 工厂模式用到java反射. ao ...

  8. pl/sql的工具导入和代码导入

    工具导入:在导入的文件中添加导入工具.导入imp:F:\app\Administrator\product\11.1.0\db_1\BIN\imp.exe导出exp:F:\app\Administra ...

  9. 【转】深入理解Java内存模型（五）——锁

    锁的释放-获取建立的happens before 关系 锁是java并发编程中最重要的同步机制.锁除了让临界区互斥执行外,还可以让释放锁的线程向获取同一个锁的线程发送消息. 下面是锁释放-获取的示例代 ...

  10. 【C#编程基础学习笔记】6---变量的命名

    2013/7/24 技术qq交流群:JavaDream:251572072  教程下载,在线交流:创梦IT社区:www.credream.com [C#编程基础学习笔记]6---变量的命名 ----- ...