事件冒泡
结构上（非视觉上）嵌套关系的元素，会存在事件的冒泡功能，
即同一事件，自子元素冒泡向父元素（自内向外）
源元素触发不算是冒泡
<body>
<div style="width: 300px;height: 300px;background: red;">
<div class="test" style="width: 200px;height: 200px;background: blue;">
<div class="test1" style="width: 100px;height: 100px;background: black;"></div>
</div>
</div>
<script type="text/javascript">
var warp = document.getElementsByTagName('div')[0];
var test = document.getElementsByClassName('test')[0];
var test1 = document.getElementsByClassName('test1')[0];
warp.addEventListener('click',function () {console.log('warp')},false);
test.addEventListener('click',function () {console.log('test')},false);
test1.addEventListener('click',function () {console.log('test1')},false);
</script>
</body>
以上是点击了 黑色的 div 触发的事件，
每个元素都绑定一个事件，点击最里层的子元素，会存在事件冒泡功能。
事件捕获
ele.addEventListener(type,fun,true)
结构上（非视觉上）嵌套关系的元素，会存在事件的捕获功能，
即同一事件，自父元素捕获至子元素（事件源元素）（自外向内）
源元素触发不算是捕获
低版本IE没有捕获事件
多个事件类型触发顺序，先捕获，后冒泡
focus,blur,change,submit,reset,select等事件不冒泡
取消冒泡
event.stopPropagation() W3C标准，但是 IE 9 以下不支持
示例：
box3.addEventListener('click',function (event) {
console.log('box3');
event.stopPropagation();
},false)
event.cancelBubble = true 取消冒泡，兼容IE
示例：
box3.addEventListener('click',function () {
console.log('box3');
event.cancelBubble = true;
},false)
封装方法stopBubble，取消冒泡，兼容 ie
function stopBubble(event) {
if(event.stopPropagation) {
event.stopPropagation();
}else {
event.cancelBubble = true;
}
}
示例：
box3.addEventListener('click',function (event) {
console.log('box3');
function stopBubble() {
if(event.stopPropagation) {
event.stopPropagation();
}else {
event.cancelBubble = true;
}
}
stopBubble(event);
},false)
阻止默认事件
写在处理函数的内部执行
常见的默认事件： 表单提交，a标签跳转，右键菜单...
1.
return false
eve.onclick = function() {} 这种方式的绑定事件才生效
例如取消右键菜单事件：
document.oncontextmenu = function () {
return false;
}
执行后右键就不会再弹出菜单。
2.
eve.preventDefault()
取消右键弹出菜单
ie9以下不兼容
document.oncontextmenu = function (eve) {
eve.preventDefault();
}
支持所有绑定事件的方法
3.
兼容IE9以下的浏览器,高版本 IE 不支持
eve.returnValue = false;
4.
封装一个方法，兼容所有浏览器组织默认事件
function stopDefault(event) {
if(event.preventDefault) {
event.preventDefault();
}else {
event.returnValue = false;
}
}
使用方法：
a.onclick = function () {
stopDefault(event);
}
function stopDefault(event) {
if(event.preventDefault) {
event.preventDefault();
}else {
event.returnValue = false;
}
}