DOM事件处理程序

1.HTML事件处理程序

<input type="button" id="btn" value="click me!" onclick="alert(1)"/>

不足：
1）存在时差问题，如果函数定义在里，位于按钮下面，如果用户在页面解析JS之前单击按钮，就会引发错误。
2）存在兼容性问题，不同的JavaScript引擎遵循的标识符解析规则略有差异。
3）html和javascript耦合度太高，如果想要修改事件处理程序，就要同时修改html代码和JavaScript代码。

2.DOM0级事件处理程序

<input type="button" id="btn" value="click me!"/>

<script type="text/javascript">
var btn = document.getElementById("btn");  
btn.onclick = function(){  
    alert("dom0级事件处理程序");  
}  
</script> 

删除该事件用btn.onclick=null;

3.DOM2级事件处理程序–可绑定多个事件处理函数，依次触发
DOM2级事件处理程序定义了两个方法：addEventLister 和removeEventLister 用于添加和删除事件处理程序。
1）addEventLister事件添加程序接受三个参数：
事件名字，事件处理程序，布尔值（为true代表捕获阶段，false代表冒泡阶段）。
2）RemoveEventLister事件移除程序也接受三个参数：
事件名字不加on，类似click，事件处理程序，布尔值，因为事件移除的程序要和添加的一样，所以事件移除的事件处理程序不要使用匿名函数，否则无法移除

<input type="button" id="btn" value="click me!"/>
<script type="text/javascript">
function showMes(){
     alert("clicked");
}
var btn=document.gerElementById("btn");
btn.addEventListener("click",showMes,false);//添加
btn.removeEventListener("click",showMes,false);//移除
</script>

4.IE事件处理程序
IE实现了与DOM2级中类似的两个方法，attachEvent和detachEvent用于添加和移除事件处理程序。
这两个方法接受两个参数即DOM2中方法的前两个，但事件要加on，类似onclick，因为IE8及以前只支持事件冒泡，所以事件均在冒泡阶段执行

<input type="button" id="btn" value="click me!"/>
<script type="text/javascript">
function showMessage(){
     alert("clicked");
}
var btn = document.getElementById("btn");
btn.attachEvent("onclick",showMessage ,false);  
btn.detachEvent("onclick",showMessage,false);  
</script>  

5.跨浏览器的事件处理程序

EventUtil={
    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 ;
        }
    },
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent("on" + type ,handler);
        }else{
            element["on" + type] = null ;
        }
    }
}
EventUtil.addHandler(btn,"click",showMessage);