js事件流

一、JavaScript事件流

js是一门基于对象和事件驱动的具有安全性的客户端脚本语言。

事件是连接JavaScript和DOM的桥梁，为js提供交互行为提供方式；事件绑定于DOM对象上，可用于用户触发而执行相对应的处理程序。

事件流包括三个阶段，分别是捕获阶段，目标阶段，冒泡阶段。

在阐述时间流的三个阶段之前，我们先了解一下js对象的事件监听。

所谓事件监听，即使为DOM绑定相对应触发事件；

绑定事件监听的三种方法分别为：

element.addEventListener(type,function,useCapture);//useCapture为ture，事件句柄在捕获阶段执行，反之在冒泡阶段执行；Mozilla中；
element.attachEvent("on"+type,function)；//IE中
element.on+type=function(){};

绑定事件之后，当用户触发到某元素的事件之时，则会从document开始一级一级的向下查找到对应的元素，该阶段为捕获阶段；到达目标之后则为目标阶段；触发目标的处理程序之后，则从目标一级一级的向上直到document，该阶段为冒泡阶段。

如今一般都是使用冒泡事件流来进行事件的处理；

事件冒泡的作用主要是允许多个操作被集中处理，例如一个列表的每一个字段点击都会出现相应的处理反应，则可以直接为所有字段的上一级元素绑定处理程序；

但是有些程序相反需要取消冒泡机制带来的弊端，此时可以使用阻止事件冒泡的方法，evet.stopPropagation();

<2017-09-11增添>

js事件机制包括：事件绑定、事件监听、事件委托。

1）事件绑定：

方式：

1.DOM元素上直接绑定

<input type="button" onclick="func()" />

2.js中绑定

<input type='button' id="btn" />

<script>
    var btn = document.getElenmentById("btn");
     btn.onclick = function(){
             alert('Hello')
      };
</script>

　　

2）事件监听

方法：addEventListener、attachEvent

W3C规范：

element.addEventListener(event, function, useCapture);

event:事件名；

function:回调函数；

useCapture:指定阶段（捕获或冒泡）；ture：捕获；false：冒泡；默认：false；

IE规范：

element.attachEvent（event，function）；

冒泡阶段执行

3）事件委托

原理：利用冒泡，在所有需要绑定相同事件的子元素的父元素上绑定对应事件。

优点：提高性能，减少事件的注册；动态添加的元素依旧绑定对应事件。