JavaScript DOM事件流

时间 2019-11-18

原文原文链接

昨天一天被Amy姐姐讲懵圈了。讲的自信心快没有了，严重怀疑智商。因此今天写一篇相关的基础知识博客，好好补一下。心情有点low,但仍是要加油！！！没有人会同情弱者。html

历史由来：DOM事件标准定义了两种事件流，这两种事件流有着显著的不一样而且可能对你的应用有着至关大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样，在它们成为标准前，Netscape和微软各自不一样地实现了它们。Netscape选择实现了捕获事件流，微软则实现了冒泡事件流。幸运的是，W3C决定组合使用这两种方法，而且大多数新浏览器都遵循这两种事件流方式。浏览器

DOM事件流

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所通过的结点都会收到该事件，这个传播过程可称为DOM事件流。

DOM同时支持两种事件模型：捕获型事件和冒泡型事件，可是，捕获型事件先发生。两种事件流会触发DOM中的全部对象，从document对象开始，也在document对象结束。

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

1.冒泡事件流

当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点，继承各自的父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。在冒泡过程当中的任什么时候候均可以终止事件的冒泡，在听从W3C标准的浏览器里能够经过调用事件对象上的stopPropagation()方法，在Internet Explorer里能够经过设置事件对象的cancelBubble属性为true若是不中止事件的传播，事件将一直经过DOM冒泡直至到达文档根。

2.捕获事件流

事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的全部祖先元素（）依次往下传递。在这个过程当中，事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获，若是事件监听器在被注册时设置了useCapture属性为true,那么它们能够被分派给这期间的任何元素以对事件作出处理；不然，事件会被接着传递给派生元素路径上的下一元素，直至目标元素。事件到达目标元素后，它会接着经过DOM节点再进行冒泡。

具体介绍：

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

IE 5.5: div -> body -> document函数

IE 6.0: div -> body -> html -> documentspa

Mozilla 1.0: div -> body -> html -> document -> windowcode

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

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

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

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

( 4 )事件流的写法以及实现方式

标准实现方式使用关键词addEventListener,假如你想要给某一个元素添加事件,如今就能够这样写element.addEventListener(eventType, fn, false).

DOM对象.addEventListener(事件类型, 回调函数, 事件机制)这里的事件类型表示你要使用哪一种事件类型好比click, 回调函数里面写着触发此事件你要作什么事情, 事件机制分为冒泡和捕获,若是为false表示事件冒泡,为true表示事件捕获.

写到这大体明白一点了，如今去听amy姐姐的课吧，听完她的课再来更博，要写一篇全互联网最全的

DOM事件流介绍。其实说了这么半天，学了这么多，我还不知道这玩意是用来解决什么问题的，真是醉了。解决跨浏览器的兼容性问题。啧啧，继续补充笔记，补充关于DOM0级事件，DOM2级事件，IE事件。

( 5 )DOM 0级事件处理程序（此部分借鉴本园凡图大神）

0级DOM

分为2个：一是在标签内写onclick事件

　　　　二是在JS写onlicke=function（）{}函数

1）

<input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" >

2）

document.getElementById("myButton").onclick = function () { alert('thanks'); }

（ 6）DOM 2级事件处理程序

2级DOM

只有一个：监听方法，有两个方法用来添加和移除事件处理程序：addEventListener()和removeEventListener()。

它们都有三个参数：第一个参数是事件名（如click）；

　　　　　　　　　第二个参数是事件处理程序函数；

　　　　　　　　第三个参数若是是true则表示在捕获阶段调用，为false表示在冒泡阶段调用。

addEventListener():能够为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。
removeEventListener():不能移除匿名添加的函数。

document.getElementById("myTest").attachEvent("onclick", function(){alert(1)});
//等价于
document.getElementById("myTest").addEventListener("click", function(){alert(1)}, false);

只有2级DOM包含3个事件：事件捕获阶段、处于目标阶段和事件冒泡阶段

<span>
    <a></a>
</span>

点击a后capturing(捕捉)阶段事件传播会从document-> span->a（由大到小），而后发生在a，最后bubbling(冒泡)阶段事件传播会从a->span->document（由小到大）。

1.事件冒泡（经常使用）

IE中采用的事件流是事件冒泡，先从具体的接收元素，而后逐步向上传播到不具体的元素。

2.事件捕获（少用）

Netscapte（网景公司,1994，浏览器大战）采用事件捕获，先由不具体的元素接收事件，最具体的节点最后才接收到事件。

3.DOM事件流

学到了，受益不浅，虽然不清楚与接下来的知识有啥关系。可是柑橘很重要，加油吧，呵呵！！！