原生js底层基础（二十）事件冒泡、事件捕获及取消默认事件方法

事件流模型有两种：捕获型事件和冒泡型事件

1.事件冒泡、捕获

当使用addEventListener绑定事件，第三个参数为true时表示事件捕获， false为事件冒泡。
事件冒泡：
结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底向上）。简单点说例如一个button绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 。
事件捕获：
结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）
触发顺序：先捕获，后冒泡。

focus，blur,change,submit,reset,select等事件不冒泡

2.取消冒泡事件

有的时候我们不想触发事件的冒泡事件，那么我们可以采取以下方法：

（1） event.stopPropagation

此方法为W3C标准的方法，但是不兼容IE9以下的版本

（2）event.cacelBubble = true

IE独有的一个方法

3.封装取消冒泡事件的函数

function stopBubble(event) {
    if (event.stopPropagation) {
        event.stopPropagation(); //IE9以下不兼容
    } else {
        event.cacelBubble = true; //IE独有
    }
}

4.阻止默认事件

默认事件就是表单提交、a标签跳转、右键菜单等
阻止默认事件的方法有：

（1）return false；

以对象属性方式注册的事件才生效

（2）event.preventDefault()；

W3C的标准方法，IE9以下不兼容

（3）event.returnValue = false；

此方法可以兼容IE低版本

5.封装阻止默认事件的函数

function cancelHandler(e) {
    var event = e || window.e; //IE仅支持window.e
    if (event.preventDefault) {
        event.preventDefault(); //IE9以下不兼容
    } else {
        event.returnValue = false; //IE
    }
}

例如：
取消默认右键菜单事件

document.oncontextmenu = function(e){
			 cancelHandler(e);
		}

取消a标签默认可点击事件

<a href="javascript:void(0)"></a>