javascript事件流讲解和实例应用
当页面元素触发事件的时候，该元素的容器以及整个页面都会按照特定
顺序响应该元素的触发事件，事件传播的顺序叫做事件流。
一、事件流的分类
1.冒泡型事件(所有的浏览器都支持 w3c标准)
由明确的事件源到最不确定的事件源依次向上触发，有内向外。
2.捕获型事件(IE不支持 w3c标准 火狐)
不确定的事件源到明确的事件源依次向下触发，由外向内。
addEventListener(事件，处理函数，false)
addEventListener(事件，处理函数，true)
二、阻止事件流
IE:
事件对象.cancelBubble=true;
FF:
事件对象.stopPropagation();
三、目标事件源的对象
IE：事件对象.srcElement
FF:事件对象.target
例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table {
margin: 0 auto;
}
td{
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function (){
var tbl = document.getElementById("tbl");
tbl.ondblclick = function(e){
var vc = e || window.event;
var ov = vc.srcElement || vc.target;
if(ov.nodeName == "TH"){
return;
}
var oldstr = ov.innerHTML;
var txts = document.createElement("input");
txts.type = "text";
ov.innerHTML = "";
ov.appendChild(txts);
txts.focus();
txts.onblur = txts.ondblclick = txts.onkeydown = function(e){
var vc = e || window.event;
if(vc.type == "blur" || (vc.type == "keydown" && vc.keyCode == "13")){
var str;
if(txts.value.trim() == ""){
str = oldstr;
}else{
str = txts.value;
}
ov.removeChild(txts);
ov.innerHTML = str;
}
}
}
}
</script>
</head>
<body>
<table id="tbl" border="1" width="700" cellpadding="10" cellspacing="0" >
<caption>学生成绩单</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>科目</th>
<th>分数</th>
</tr>
<tr >
<td>张三</td>
<td>21</td>
<td>男</td>
<td>JavaScript</td>
<td>86</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
<td>女</td>
<td>CSS</td>
<td>94</td>
</tr>
<tr>
<td>大二</td>
<td>20</td>
<td>女</td>
<td>HTML</td>
<td>89</td>
</tr>
</table>
</body>
</html>