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>