dom事件流及事件对象

DOM事件流

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

包括三个阶段：

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

注意:

1. JS代码只能执行捕获或者冒泡其中的一个阶段 onclick 和 attachEvent 只能得到冒泡阶段

2. addEventListener (type, listener[, useCapture])
   第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段电泳事件处理程序。

3. 在实际开发中，我们很少使用事件捕获，我们更关注事件冒泡
   有些事件是没有冒泡的，比如onblur、onfocus、onmouseover、onmouseleave

事件对象

1. event 就是一个事件对象，写道我们的侦听函数的小括号里面，当形参来看

2. 事件对象只有有了事件才会存在，他是系统给我们自动创建的，不需要我们传递参数

3. 事件对象是我们的事件的一系列相关数据的集合，比如鼠标点击里面就包含了鼠标的相关信息
   这个事件对象我们可以自己命名，比如 event、evt 、e 等

4. 事件对象也有兼容性问题。 IE 6、7、8通过 window.event 实现

兼容性写法：
event = event || windoe.event;

事件对象常见的属性和方法
事件对象属性方法及说明
e.target 返回触发事件的对象 标准
e.scrElement 返回触发事件的对象 非标准 IE 6 7 8 使用
e.type 返回事件的类型，比如click、mouseover等，不带 on
e.cancelBubble 该属性阻止冒泡，非标准，IE 6 7 8 使用
e.returnValue 该属性阻止默认事件（默认行为）非标准 ，IE 6 7 8 使用，比如不让链接跳转
e.preventDefaule() 该方法阻止默认事件（默认行为）标准 ，比如不让链接跳转
e.stopPropagation() 阻止冒泡，标准

e.target 和 this 的区别
this 返回的是绑定事件的对象（元素）
e.target 返回的是点击的那个对象，就是谁触发了这个事件

阻止对象默认行为
三种方法：

e.preventDefaule(); 是一个方法，适合普通浏览器
e.returnValue;
是一个属性，适用于 IE 6 7 8
return false; 没有兼容性问题，但是需要注意后面的语句就不执行了，直接跳出

阻止冒泡

event.stopPropagation(); // 一般浏览器停止冒泡
event.cancelBubble; // IE 6 7 8 的停止冒泡