javascript事件处理

事件流两种传递方式：分别为事件冒泡与事件捕获。

对于事件冒泡，事件触发后，从触发它的容器一层层上传到父容器。所以会出现多容器对同一事件处理的现象，这可能不是我们希望看到的。事件捕获则相反，是从最不具体的容器传递到触发事件的容器。

添加事件处理程序

一：html事件处理

内嵌到html代码中，联系紧密，变动时，可能需要改动两处代码。如事件处理程序名称改变。

<button type="button" onclick="delet()">删除</button>
<span>hello</span>
<script type="text/javascript">
function delet()
{
  var span=document.getElementsByTagName("span");
  span[0].parentNode.removeChild(span[0]);
}
</script>

二：DOM0级事件处理

<button type="button" id="delet">删除</button>
<span>hello</span>
<script type="text/javascript">
document.getElementById("delet").onclick=function
{
  var span=document.getElementsByTagName("span");
  span[0].parentNode.removeChild(span[0]);
}
</script>

三：DOM2级事件处理

定义了两个方法：addEventLister(),removeEventLister()

分别有三个参数：事件名，处理程序，布尔值(true表示捕获阶段调用处理程序，flase则表示冒泡阶段调用程序)

IE浏览器不支持。

<button type="button" id="delet">删除</button>

<span>hello</span>

<script type="text/javascript">

  document.getElementById("delet").addEventListener("click",function()

  {

     var span=document.getElementsByTagName("span");

     span[0].parentNode.removeChild(span[0]);

  },false);

</script>
四：IE事件处理程序

也定义了两个方法：attachEvent(),detachEvent()

两个参数，没有最后的布尔值

<button type="button" id="delet">删除</button>
<span>hello</span>
<script type="text/javascript">
document.getElementById("delet").attachEvent("onclick",function()
{
    var span=document.getElementsByTagName("span");
    span[0].parentNode.removeChild(span[0]);
});
</script>
所以涉及跨浏览器处理

var evenUtil= 
{
   addHandler:function(element,type,handler) 
   {
     if(element.addEventListener)
        element.addEventListener(type,handler,false);
      else if(element.attachEvent) 
        element.attachEvent("on"+type,handler);
      else
        element["on"+type]=handler;
}
}
element.type===element[type]