原生JavaScript交互功能开发之事件流及事件委托

概念: 事件、事件流、事件捕获、事件冒泡、事件委托

事件: JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个Click 事件来触发某个函数。

事件举例：

1、鼠标事件

2、页面事件

3、键盘事件

4、表单中选取输入框事件

事件流:指的是DOM事件流

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

事件捕获：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)

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

事件委托：对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

具体讲解:

JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器来预订事件，以便事件发生时执行相应的代码。

事件流的起源：就是在浏览器发展到第四代的时候，浏览器开发团队遇到一个问题：页面的哪一部分会拥有某个特定的事件？要明白这个问题问的是什么，可以想象画在一张纸上的一组同心圆。如果你把手指放在圆心上，那么你的手指指向的不是一个圆，而是纸上的所有圆。也就是说如果单击了页面的某个按钮，同时也单击了按钮的容器元素，甚至单击了整个页面。不过呢，IE提出的是冒泡流，而网景提出的是捕获流。

JS事件流原理图如下：

由此可以知道

1、一个完整的JS事件流是从window开始，最后回到window的一个过程

2、事件流被分为三个阶段(1~5)捕获过程、(5~6)目标过程、(6~10)冒泡过程

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

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

1、冒泡事件流

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

如果想创建一个捕捉事件，在支持W3C 事件模型的浏览器中，将addEventListener的第三个参数设为true就好了。例如：

ID为div1和div2的两个元素都被委派了捕捉阶段的事件处理函数，这样：

当点击#div1（红色区域）时，应该会alert出”div1″

当点击#div2（粉色区域）时，应该会先alert出”div1″，再alert出”div2″，因为在事件捕捉阶段，事件是从根元素向下传播的，#div1是#div2的父元素，自然绑定在#div1上的click事件也会先于#div2上的click事件被执行

2、捕获事件流

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

事件冒泡流和事件捕获流的区别，如下图所示：

当我们给body、bigDiv和smallDiv这三个元素添加onclick事件时，如果鼠标点击smallDiv,事件冒泡的执行顺序会先触发smallDiv的onclick事件处理程序，然后再按照顺序执行bigDiv和body的事件处理程序。

如果鼠标点击body元素，事件捕获的执行顺序会先触发body的事件处理程序，然后在按照顺序执行bidDiv和smallDiv的事件处理程序。

3、事件委托

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。导致这一问题的原因是多方面的。首先，每个函数都是对象，都会占用内存；内存中的对象越多，性能就越差。其次，必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click事件会一直冒泡到document层次。也就是说，我们可以为整个页面指定一个onclick事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。

看下面的代码：

<ul id="color-list">

<li>red</li>

<li>yellow</li>

<li>blue</li>

<li>green</li>

<li>black</li>

<li>white</li>

</ul>

如果点击页面中的li元素，然后输出li当中的颜色，我们通常会这样写:

var color_list = document.getElementById('color-list');

var colors = color_list.getElementsByTagName('li');

for(vari=0;i<colors.length;i++){

colors[i].addEventListener('click',showColor,false);

};

function showColor(e){

var x = e.target;

alert("The color is " + x.innerHTML);

};

利用事件流的特性，我们只绑定一个事件处理函数也可以完成：

var color_list = document.getElementById('color-list');

color_list.addEventListener('click',showColor,false);

function showColor(e){

var x = e.target;

if(x.nodeName.toLowerCase() === 'li'){

alert('The color is ' + x.innerHTML);

}

}

对于事件委托来说，在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分，但是由于事件冒泡的事件流模型被所有主流的浏览器兼容，从兼容性角度来说还是建议大家使用事件冒泡模型

事件委托还有一个好处就是添加进来的元素也能绑定事件

看下面的代码

没有使用事件委托，当点击按钮，添加一个li，然后点击每一个li获取其中的内容，那么新添加的li不能响应onclick事件，运行下面的代码即可以得到结果：

<ul id="thl">

<li>001</li>

<li>002</li>

<li>003</li>

</ul>

<button onclick="fun()">touch</button>

响应按钮的点击事件创建li：

function fun(){

var node=document.createElement("li");

var textnode=document.createTextNode("004");

node.appendChild(textnode);

document.getElementById("thl").appendChild(node);

}

为每一个li添加onclick事件，并获取点击的li的内容：

var thl= document.getElementById('thl');

var aLi = thl.getElementsByTagName('li');

for (var i = 0; i<aLi.length; i++) {

aLi[i].onclick = fn;

}

function fn (){

console.log(this.innerHTML);

}

使用了事件委托，新添加的元素也能够响应onclick事件：

点击按钮添加新元素

function fun(){

var node=document.createElement("li");

var textnode=document.createTextNode("004");

node.appendChild(textnode);

document.getElementById("thl").appendChild(node);

}

使用事件委托为li的父元素添加onclick事件

var thl= document.getElementById('thl');

thl.onclick = function(ev) {

ev = ev || event;

var target = ev.target || ev.srcElement;

if (target.nodeName.toLowerCase() == 'li') {

console.log(target.innerHTML);

}

};

来源：千锋HTML5