JavaScript 事件，事件流，事件委托

事件

HTML事件
HTML 事件可以是浏览器行为，也可以是客户行为。HTML 元素中可以增加事件属性，使用 JavaScript 代码来增加 HTML 元素。

示例：按钮元素中增加了 onclick 属性

<button onclick="this.innerHTML=Date()">现在的时间?</button>

常见的HTML事件：

事件流

事件流就是形容了页面中接受事件的顺序，IE和Netscape提出来差不多完全相反的事件流的概念，IE事件流是事件冒泡流，Netscape事件流是事件捕获流。

事件冒泡
事件冒泡即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，而后逐级向上传播至最不具体的节点（文档）。（由内及外）

示例：

<div id = "div">    <span id="span">        <a id="aTag">事件测试</a>    </span></div>

document.getElementById("aTag").addEventListener('click',aTag);document.getElementById("span").addEventListener('click',span);document.getElementById("div").addEventListener('click',div);function aTag(e) {    alert("点击的是a标签");}function span(e) {    alert("点击的是span标签");}function div(e) {    alert("点击的是div标签");}

事件捕获
事件捕获即事件最早由不太具体的节点接收，而最具体的节点最后接收到事件。（由外及内）

示例：

document.getElementById("div").addEventListener('click',div,true);document.getElementById("aTag").addEventListener('click',aTag,true);document.getElementById("span").addEventListener('click',span,true);

第三个参数设置为true，即为捕获事件，默认为false；否则的话，事件流还是和上面的一样，由于不论是在IE还是标准浏览器下，事件冒泡浏览器都支持的。

DOM事件流
DOM2级事件流：
DOM2级事件 规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

• 捕获阶段：实际目标(<div>元素)在捕获阶段不会接收事件，意思是事件从 [ document->html->body ] 后就中止了。【1、2、3】
• 目标阶段：事件在目标元素上发生。但事件解决被看作是冒泡阶段的一部分。
• 冒泡阶段：从目标元素开始解决事件，一直传播到文档。也就是 [ div->body->html->document ]【4、5、6、7】

DOM事件级别

（1）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>

（2）DOM2级
DOM2级定义了两个事件解决程序。（观察者模式）

• addEventListener() ：增加事件侦听器
• removeEventListener() ：删除事件侦听器

（3）DOM3级
对DOM2添加了内容模型 (DTD 、Schemas) 和文档验证。定义了少量新的事件，比方键盘事件，还可以自己设置事件。

自己设置事件：
自己设置事件不是由DOM原生触发的，它的目的是让开发人员创立自己的事件。
要创立的自己设置事件可以由createEvent(“CustomEvent”); 返回的对象有一个initCustomEvent（）方法接收如下四个参数。

• type：字符串，触发的事件类型，自己设置。例如 “keyDown”，“selectedChange”;
• bubble（布尔值）：标示事件能否应该冒泡；
• cancelable(布尔值)：标示事件能否可以取消；
• detail（对象）：任意值，保存在event对象的detail属性中；

事件委托

一个事件原本是要绑定到某个元素上，然而却绑定到了该元素的父（或者祖先）元素上，利用事件冒泡原理，触发执行效果。

事件委托优点：

• 提高网页性能。
• 通过事件委托增加的事件，对后期生成的元素仍然有效。

事件委托的使用方法：

var ul = document.querySelector("ul");ul.onclick = function(e){    var e = e || window.event;    var target = e.target || e.srcElement;    if(target.nodeName.toLowerCase() === "li"){        alert("li");    }}