javascript事件流 _javascript

事件html中与JAVAscript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。
事件流事件流描述的就是从页面中接收事件的顺序。而早期的IE和Netscape提出了完全相反的事件流概念，IE事件流是事件冒泡，而Netscape的事件流就是事件捕获。
事件流类别事件冒泡即从下至上，从目标触发的元素逐级向上传播，直到window对象。

文章插图

事件捕获即从上至下，从document逐级向下传播到目标元素。

文章插图

后来ECMAScript在DOM2中对事件流进行了进一步规范，基本上就是上述二者的结合。
DOM2级事件规定的事件流包括三个阶段：

事件捕获阶段
处于目标阶段
事件冒泡阶段

注意:warning:：先捕获后冒泡，但是在目标节点上谁写在前面谁先执行。但是在目标元素上不区分冒泡还是捕获，按绑定的顺序来执行。

文章插图

DOM事件级别分为四个级别

文章插图

DOM0：不是W3C规范。
DOM1：开始是W3C规范。专注于HTML文档和XML文档。
DOM2：对DOM1增加了样式表对象模型
DOM3：对DOM2增加了内容模型 (DTD 、Schemas) 和文档验证。
DOM0级DOM0级事件具有极好的跨浏览器优势，会以最快的速度绑定。绑定方式有如下两种
行内绑定（内联模型）将函数名直接作为html标签中属性的属性值。
<div onclick="btnClick()">按钮</div><script>function btnClick(){console.log("hello");}</script>动态绑定（脚本模型）通过在JS中选中某个节点，然后给节点添加onclick属性

<div id="btn">按钮</div><script>var btn = document.getElementById("btn");btn.onclick = function(){console.log("点击");}</script>

注意:warning:

DOM0级同一个节点只能添加一次同类型事件，后添加的同类型事件会覆盖前面的事件
DOM0级只支持冒泡

DOM1级其中DOM1级事件处理标准中并没有定义事件相关的内容，所以没有所谓的DOM1事件处理
DOM2级DOM2级定义了两个事件处理程序。（观察者模式）

addEventListener() ---添加事件侦听器
removeEventListener() ---删除事件侦听器

函数均有3个参数，第一个参数是要处理的事件名第二个参数是作为事件处理程序的函数第三个参数是一个boolean值，默认false表示使用冒泡机制，true表示捕获机制。

<div id="btn">按钮</div><script>var btn=document.getElementById("btn");btn.addEventListener("click",hello,false);btn.addEventListener("click",helloagain,false);function hello(){console.log("hello");}function helloagain(){console.log("hello again");}</script>// 点击后结果： // hello// hello again

注意:warning:
如果定义了一模一样的监听方法时，是会发生覆盖的。

<div id="btn">点击</div><script>var btn=document.getElementById("btn");btn.addEventListener("click",hello,false);btn.addEventListener("click",hello,false);function hello(){console.log("hello");}</script>// 点击后结果： // hello

DOM3级对DOM2增加了内容模型 (DTD 、Schemas) 和文档验证。定义了一些新的事件，比如键盘事件，还可以自定义事件。
自定义事件自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent("CustomEvent"); 返回的对象有一个initCustomEvent（）方法接收如下四个参数。