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]