笔记：JS事件的捕获与冒泡
1. 名词解释
- 事件捕获：当使用捕获事件时，父级元素先触发，子级元素后触发 inner-->middle-->outer
- 事件冒泡：当使用冒泡事件时，子级元素先触发，父级元素后触发 outer-->middle-->inner
2. 事件的发生顺序
W3C模型：将事件的两种类型进行中和，任何事件发生时，先从顶层开始进行事件捕获直到触发到达了事件源元素。然后再从事件源往上进行事件冒泡直到document
3. 添加/取消事件过程
- addEventListener(event,function,true/false)第三个选项为：是否添加事件捕获（true为添加捕获事件，false为添加冒泡事件）；取消事件使用removeEventListener(event,function,true/flase)；取消冒泡事件stopPropagation()【W3C模型】
- attachEvent(‘on’+event,function)只支持冒泡事件；取消事件用dettachEvent(‘on’+event,function)；取消冒泡事件过程cancelBubble = true【IE】
4. 处理默认行为
事件捕获与冒泡的过程统称为事件的传播，阻止事件的默认行为：
IE：
window.event.returnValue = false
W3C:
preventDefault();
5. 不能冒泡的事件
blur 失去焦点
focus 获得焦点
load 加载页面
unload 卸载页面
注：mouseenter/mouseleave 不冒泡 mouseover/mouseout 冒泡
Focusin/focusout 冒泡 便于管理页面上的焦点变化
（这两点继续学习）
6. 实例
<html>
<head>
<title>事件的捕获和冒泡</title>
</head>
<body>
<div id="outer" style="width:500px;height:500px;background-color:red">
<div id="middle" style="width:300px;height:300px;background-color:black">
<div id="inner" style="width:100px;height:100px;background-color:yellow">
</div>
</div>
</div>
<script>
var outer = document.getElementById('outer');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
if(inner.addEventListener){
outer.addEventListener('click',function(){alert(this.id);},true);
middle.addEventListener('click',function(){alert(this.id);},false);
inner.addEventListener('click',function(){alert(this.id);},true);
}else if(inner.attachEvent){
inner.attachEvent('onclick',function(){alert(inner.id);});
middle.attachEvent('onclick',function(){alert(middle.id);});
outer.attachEvent('onclick',function(){alert(outer.id);});
}
</script>
</body>
</html>
根据代码可以看出：
outer-->inner依次触发的事件为2图中的1、5、3，所以他的执行先后顺序按照数字大小执行，即：outer-->inner-->middle
<html>
<body>
<table border="1" width="26%" id="tableA" onclick="alert('tableA')">
<tr onclick="tableA_rowA_click()">
<td width="106">一般</td>
</tr>
<tr onclick="tableA_rowB_click()">
<td width="106">阻止消息上传</td>
</tr>
</table>
<script language="javascript">
function tableA_rowA_click(){
alert('tableA_rowA');
}
function tableA_rowB_click(){
alert('tableA_rowB');
event.stopPropagation();
//event.cancelBubble=true;
}
</script>
</body>
</html>
表中第一行的事件为：输出tableA tableA_rowA 第二行的事件为：输出tableA_rowB
原因：第二行使用了stopPropagation()方法，阻止了事件的冒泡
