初始js闭包事件的冒泡和捕获EVENT对象

一.初识闭包

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：鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口，这两个属性很重要；

转载于:https://www.cnblogs.com/pianruijie/p/7773523.html

初始js闭包事件的冒泡和捕获EVENT对象相关推荐

js中的DOM事件之冒泡和捕获事件详解
DOM中的事件是一个很中要的东西,它可以让用户和浏览器之间进行交互,以此来实现人机交互效果 DOM事件 DOM事件分为DOM0级事件和DOM2级事件.DOM0级其实不存在,我们把DOM最初的版本叫0级 ...
Attribut方法、鼠标事件、冒泡及捕获
演示设置两个按钮,点一下变成不可点,另个变可点 getAttribut() 拿到一个属性 setAttribute() 修改一个属性 removeAttribute() 移除一个属性 hasAttr ...
JS 哪些事件支持冒泡
js 的冒泡和捕获事件
事件冒泡和事件捕获事件的冒泡和捕获是决定事件的执行顺序,如下有两个 div,同时绑定了 click 事件,哪个div 绑定的事件先执行呢? <div class="outer&quo ...
事件模型、事件流（冒泡与捕获）、事件代理
本文原链接:https://www.cnblogs.com/hngdlxy143/p/9068282.html https://www.jb51.net/article/139997.htm 事件模型 ...
JavaScript 详说事件流（冒泡、捕获、传播、委托）
事件流事件流描述的是从页面中接收事件的顺序. 标准DOM事件流存在三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段. 事件捕获:当触发事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元 ...
JS基础-事件模型(事件事件流自定义事件事件冒泡/代理)
文章目录一.事件与事件流二.事件模型 1.DOM0级模型 2.IE事件模型 3.DOM2级模型 4.DOM3级事件处理方式三.事件对象四.事件绑定与解除 1.事件绑定 1.1对象.on事件名字 ...
JavaScript事件——event对象事件冒泡阻止默认行为事件捕获
event对象用来获取事物的详细信息:鼠标位置.键盘按键 e.clientX 鼠标距离元素所在的X轴(左边)位置 e.clientY 鼠标距离元素所在的Y轴(顶部)位置 (左上角为0,0点) 获取e ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
后处理程序文件大小的变量_【每日一题】(17题)面试官问：JS中事件流，事件处理程序，事件对象的理解？...
关注「松宝写代码」,精选好文,每日一题作者:saucxs | songEagle 2020,实「鼠」不易 2021,「牛」转乾坤风劲潮涌当扬帆,任重道远须奋蹄! 一.前言 2020.12.23 立 ...

初始js闭包事件的冒泡和捕获EVENT对象

初始js闭包事件的冒泡和捕获EVENT对象相关推荐

最新文章

热门文章