javascript 事件流及应用

当页面元素触发事件的时候，该元素的容器以及整个页面都会按照特定顺序发生该元素的触发

事件，事件传播的顺序叫做事件流

1.事件流的分类：
A.冒泡型事件（所有浏览器都支持）
由明确的事件源到最不确定的事件源依次向上触发
a(此引发事件)->p->div->body

B.捕获型号事件（IE不支持，符合w3c标准，火狐支持）
不确定的事件源到明确的事件源一次向下触发。
addEventListener(事件,处理函数,bool);

2.阻止事件流
IE:
事件对象.cancelBubble = true;
FF:
事件对象.stopPropagation();

3.目标事件源的对象
IE: 事件对象.srcElement
FF: 事件对象.target

例子：
<table id="tab">
<tr>
<th>1111</th>
<th>222</th>
</tr>
<tr>
<td>1111</td>
<td>222</td>
</tr>
</table>

<script>
window.onload = function(){
var tab = document.getElementById("tab");
tab.ondblclick = function(e){
var ev = e || window.event;
var tdobj = ev.srcElement || ev.target;
if(tdobj.nodeName == "TH"){
return;
}
var tdtext = tdobj.innerHTML;
tdobj.innerHTML = "";
var inputs = document.createElement("input");
inputs.type = "text";
inputs.size = 8;
tdobj.appendChild(inputs);
inputs.focus();

inputs.onblur = inputs.ondblclick = inputs.onkeydown = function

(e){
var ev = e || window.event;
if(ev.type == "blur" || ev.type == "dblclick" || (ev.type

== "keydown" && ev.keyCode == 13)){
var  val = this.value;
tdobj.removeChild(inputs);
if(val == ""){
tdobj.innerHTML = tdtext;
}else{
tdobj.innerHTML = val;
}
}
}
}
}
</script>