一.初识闭包

function a(){
  var n = 0;
  this.inc = function () {
    n++;
    console.log(n);
  };
}
var c = new a();
c.inc();  //控制台输出1
c.inc();  //控制台输出2

什么是闭包？这就是闭包！

有权访问另一个函数作用域内变量的函数都是闭包。这里 inc 函数访问了构造函数 a 里面的变量 n，所以形成了一个闭包。

function a(){
  var n = 0;
  function inc(){
    n++;
    console.log(n);
  }
  return inc;
}
var c = a();
c();  //控制台输出1
c();  //控制台输出2

var c = a()，这一句 a()返回的是函数 inc，那这句等同于 var c = inc;

c()，这一句等同于 inc();  注意，函数名只是一个标识（指向函数的指针），而()才是执行函数。

后面三句翻译过来就是：  var c = inc;  inc();  inc();

为啥要这样写？
我们知道，js的每个函数都是一个小黑屋，它可以获取外界信息，但是外界却无法直接看到里面的内容。将变量 n 放进小黑屋里，除了 inc 函数之外，没有其他办法能接触到变量 n，而且在函数 a 外定义同名的变量 n 也是互不影响的，这就是所谓的增强“封装性”。

而之所以要用 return 返回函数标识 inc，是因为在 a 函数外部无法直接调用 inc 函数，所以 return inc 与外部联系起来，代码 2 中的 this 也是将 inc 与外部联系起来而已。

常见的陷阱

function createFunctions(){
  var result = new Array();
  for (var i=0; i < 10; i++){
    result[i] = function(){
      return i;
    };
  }
  return result;
}
var funcs = createFunctions();
for (var i=0; i < funcs.length; i++){
  console.log(funcs[i]);
}
实际的执行过程：
var result = new Array(), i;
result[0] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
result[1] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
...
result[9] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
i = 10;
funcs = result;
result = null;
 
console.log(i); // funcs[0]()就是执行 return i 语句，就是返回10
console.log(i); // funcs[1]()就是执行 return i 语句，就是返回10
...
console.log(i); // funcs[9]()就是执行 return i 语句，就是返回10
闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量。这是优点也是缺点，不必要的闭包只会徒增内存消耗！另外使用闭包也要注意变量的值是否符合你的要求，因为他就像一个静态私有变量一样。闭包通常会跟很多东西混搭起来，接触多了才能加深理解，这里只是开个头说说基础性的东西。

二.事件的冒泡和捕获

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定。

支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获（true）时执行，还是事件冒泡（false）时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。

（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。

<body>
<div id = "div" >
　　<p id = "p" >事件的冒泡和捕获</p>
</div>
</body>
<script type="text/javascript">
　　document.getElementById("div").addEventListener('click',function(){
　　　　alert("parent");
　　},true);
　　document.getElementById("p").addEventListener('click',function(){
　　　　alert("child");
　　},true);
</script>

w3c中，在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~

document.getElementById("p").addEventListener('click',function(event){
　　event.stopPropagation();
　　alert("child");
},false);

三.event对象

Event属性和方法：

1. type：事件的类型，如onlick中的click；

2. srcElement/target：事件源，就是发生事件的元素；

3. button：声明被按下的鼠标键，整数，1代表左键，2代表右键，4代表中键，如果按下多个键，酒把这些值加起来，所以3就代表左右键同时按下；（firefox中 0代表左键，1代表中间键，2代表右键）

4. clientX/clientY：事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置；(在DOM标准中，这两个属性值都不考虑文档的滚动情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是 0，所以在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上
document.body.scrollLeft和 document.body.scrollTop)

5. offsetX,offsetY/layerX,layerY：事件发生的时候，鼠标相对于源元素左上角的位置；

6. x,y/pageX,pageY：检索相对于父要素鼠标水平坐标的整数；

7. altKey,ctrlKey,shiftKey等：返回一个布尔值；

8. keyCode：返回keydown何keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符；(firefox2不支持 event.keycode，可以用 event.which替代 )

9. fromElement,toElement：前者是指代mouseover事件中鼠标移动过的文档元素，后者指代mouseout事件中鼠标移动到的文档元素；

10. cancelBubble：一个布尔属性，把它设置为true的时候，将停止事件进一步起泡到包容层次的元素；(e.cancelBubble = true; 相当于 e.stopPropagation();)

11. returnValue：一个布尔属性，设置为false的时候可以组织浏览器执行默认的事件动作；(e.returnValue = false; 相当于 e.preventDefault();)

12. attachEvent(),detachEvent()/addEventListener(),removeEventListener：为制定 DOM对象事件类型注册多个事件处理函数的方法，它们有两个参数，第一个是事件类型，第二个是事件处理函数。在
attachEvent()事件执行的时候，this关键字指向的是window对象，而不是发生事件的那个元素；

13. screenX、screenY：鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口，这两个属性很重要；

初始js闭包&事件的冒泡和捕获&EVENT对象的更多相关文章

  1. react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)

    第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 ...

  2. 探讨Js的事件的冒泡阶段

    近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...

  3. js之事件冒泡和事件捕获介绍

    链接:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. (2)捕获型事件 ...

  4. JS事件冒泡与捕获

    1事件传播——冒泡与捕获 默认情况下,事件使用冒泡事件流,不使用捕获事件流.然而,在Firefox和Safari里,你可以显式的指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这 ...

  5. [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流

    面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...

  6. js关于事件的一些总结（系列一）

    今天小弟在这里说一下 js 关于事件的一些总结  在这里直接上代码 省去啰嗦的步骤以免看烦了  总结的不好希望大家见谅 一.事件的默认事件 事件的默认事件是什么? 就是a标签有一个链接事件  inpu ...

  7. JS的事件模型

    之前对事件模型还是比较清楚的,许多概念都清晰映射在脑海中.工作之后,一方面使用的局限性,二是习惯于用框架中的各种事件监听方式,简单即方便,久而久之,事件的一些概念开始淡出记忆中,就像我现在已经开始淡忘 ...

  8. JS：事件委托

    事件委托 事件流 事件流描述的是从页面中接收事件的顺序.---JS高级程序设计(第3版) DOM Level 2 Events规定的事件流有三个阶段:①事件捕获阶段.②处于目标阶段.③事件冒泡阶段 事 ...

  9. js基础——事件绑定（事件监听）

    JavaScript事件一共有三种监听方法分别如下: 1.事件监听一夹杂在html标签内 <div id="box" onClick="alert('HELLO W ...

随机推荐

  1. start to use await

    import { browser, $, $$, by, element, protractor } from "protractor"; //import { SearchPag ...

  2. xpath 选取指定文本内容可能是多种情况下的语法

    url_list = select.xpath("//ul/li/a[contains(text(),'新闻中心' )]/../../li/a/@href | //ul/li/a[conta ...

  3. 十进制 -> 十六进制

    x /16 依次取余 ,最先余作十六进制的最低 字节有效位,最后的余数  作最高的字节有效位,其中我们需要注意理解 的是  一个 数据的 最高字节及  内存的 高地址及低地址 更进一步的就算机器存储的 ...

  4. mockito 异常Reason: java.io.IOException: invalid constant type: 18

    原因: mockito内部使用的javassit的版本不一致导致的,修改为一直版本即可. 异常内容: /Library/Java/JavaVirtualMachines/jdk1.8.0_162.jd ...

  5. 服务器还原阿里云Mysql数据库

    https://www.percona.com/doc/percona-xtrabackup/2.3/installation/yum_repo.html

  6. Python conda安装 并安装Tensorflow

    Python conda安装 1: 官网下载3版本 Anaconda2-2018.12-Windows-x86_64.exe, 安装完后配置环境变量 用户变量->PATH 编辑新增路径 C:\P ...

  7. 项目集成swagger【转载】

    地址链接:https://blog.csdn.net/lx1309244704/article/details/81808788 swagger是一款高效易用的嵌入式文档插件,同时支持在线测试接口,快 ...

  8. ISO 2501 quality model division 学习笔记

    作为一个测试,学习质量模型,能够帮你 在测试设计的时候,从多个角度来思考测试用例的设计.而不仅仅是从 功能上, 同时 需要结合自己的产品,选择自己的侧重点,譬如我们公司的产品,安全性这一块 就比较小, ...

  9. python学习Day10 函数的介绍（定义、组成、使用）

    今日学习内容: 1.什么是函数 :函数就是一个含有特定功能的变量,一个解决某问题的工具 函数的定义:通过关键字def + 功能名字():代码体(根据需求撰写代码逻辑) 2.为什么要用函数:可以复用:函 ...

  10. Sping4之依赖注入

    Spring的依赖注入可以是我们不需要去管理bean,网上看到一个回答很精辟: 现在你需要买一把锤子: 1.自己做一把,解释成java就是,调用者创建被调用着,也就是自己去创造一个造锤子的方法,然后自 ...