一.初识闭包
functiona(){varn = 0;this.inc =function() {n++;console.log(n);};}varc =newa();c.inc();//控制台输出1c.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 与外部联系起来而已。
常见的陷阱
functioncreateFunctions(){varresult =newArray();for(vari=0; i < 10; i++){result[i] =function(){returni;};}returnresult;}varfuncs = createFunctions();for(vari=0; i < funcs.length; i++){console.log(funcs[i]);}实际的执行过程：varresult =newArray(), i;result[0] =function(){returni; };//没执行函数，函数内部不变，不能将函数内的i替换！result[1] =function(){returni; };//没执行函数，函数内部不变，不能将函数内的i替换！...result[9] =function(){returni; };//没执行函数，函数内部不变，不能将函数内的i替换！i = 10;funcs = result;result =null;console.log(i);// funcs[0]()就是执行 return i 语句，就是返回10console.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] 事件冒泡 阻止事件冒泡 事件的三个阶段（捕获 目标 冒泡）](https://700zi.400zi.cn/uploadfile/img/14/717/f2e2825dbf812e0dfe8ede507795ac37.jpg)
