事件处理程序和跨浏览器的事件处理程序

事件分为：HTML5、DOM0级、DOM2级、IE方法；
1、HTML5事件处理程序:

<input type = "button" value = "Click Me" onclick = "alert("clicked")">
调用在页面其它地方

<script type="text/javascript">
function showMessage(){
alert("Hello World");
}
</scri<input type = "button" value = "Click Me" onclick = "showMessage()" />

HTML5义的事件处理程序中有两个缺点：
1、存在一个时差问题。因为用户可能在HTML元素一出现在页面上时就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。以上一个例子为例。假设showMessage函数在按钮下方、页面的最底部定义的。如果用户在页面解析前就单击了按钮，就会引发错误。因此很多HTML事件处理程序都封装在一个try-catch语句中。

<input type = "button" value = "Click Me" onclick = "try{
showMessage();}catch(ex){}" />

2、HTML与JavaScript的耦合性太高，如果要更换事件处理程序就要更改两处的代码。HTML与JavaScript。而这也是许多开发人员摒弃HTML事件处理程序，转而使用JavaScript指定时间程序的原因所在。

2、DOM0级事件处理程序：至今仍为所有现代浏览器支持，一是简单，二是有跨浏览器的优势。
要使用JavaScript指定事件处理程序，首先要取得一个操作对象的引用：

var btn = document.getElementById("Mydiv");
                btn.onclick = function(){
                    alert(“hello world”);
                }

var btn = document.getElementById("Mydiv");
                btn.onclick = function(){
                    alert(thid.id); //Mydiv
                }

也可以删除通过DOM0级方法指定的事件处理程序，即将事件处理的属性值设为null。
btn.onclick = null;
将事件处理程序设置为null之后，单击按钮不会有任何反应。

3、DOM2级事件处理程序：
用于指定和删除事件处理程序 的操作addEventListener()、removeEventListener().它们都接受三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。布尔值如果为true，则在捕获阶段调用事件处理程序，反之在冒泡阶段调用事件处理程序。

var btn = document.getElementById("myBtn");
btn.addEventListener ("click", function(){
            alert(this.id);
},false);

上面代码为一个按钮添加了onclick事件，且在冒泡阶段被触发（最后一个参数是false）与DOM0级方法一样，这里添加的事件处理程序也在其依附的元素的作用域中运行。DOM2级方法添加事件的处理程序的好处是可以添加多个事件处理程序。

var btn = document.getElementById("myBtn");
btn.addEventListener ("click", function(){
            alert(this.id);
},false);
btn.addEventListener ("click", function(){
            alert("Hello world");
},false);

首先会显示元素的id，其次会显示helloworld消息。
用.addEventListener()添加的事件只能用removeEventListener().移除，并且通过addEventListener()添加的匿名函数无法移除。如上面的函数就是匿名函数，通过removeEventListener()无法移除，此时需要将函数赋给变量，再执行以下函数：

var btn = document.getElementById("myBtn");
var handler= function（）{
        //excute code
} 
btn.addEventListener("click",handler,false);
btn.removeEventListener("click",handler,false);
注：addEventListener()、removeEventListener().必须使用相同的参数

4、IE事件处理程序用于指定和删除事件处理程序 的操作attachEvent()、detachEvent()接受两个参数：事件处理程序名称和事件处理函数。添加的事件处理程序都会被添加到冒泡阶段。
与DOM2级事件处理程序一样，可以为同一个元素添加多个事件处理程序。

var btn = document.getElementById("myBtn");
btn.attachEvent ("onclick", function(){
            alert(this.id);
});
btn.attachEvent("onclick", function(){
            alert("Hello world");
});

注意第一个参数是onclick而不是DOM2中的click
这两个事件是以相反的顺序被执行。即先输出Hello World 后输出元素的ID；
detachEvent()移除事件处理程序与DOM2中是一样的。都不能用来移除匿名函数

var btn = document.getElementById("myBtn");
var handler= function（）{
        //excute code
} 
btn.attachEvent("onclick",handler);
btn.detachEvent("onclick",handler);

在了解了以上四种事件处理程序，由于浏览器对事件处理程序的支持度不一样，所以写一个跨浏览器的事件处理程序是有必要的。
首先是添加事件处理程序的方法我们在这儿创建一个名为addHandler(),它的职责是视情况使用DOM0或者DOM2或者IE方法来添加事件（在这里不讨论HTML5事件处理程序）。这个方法属于一个名叫EventUtil(名字可以自己定义)的对象，addHandler()方法接受三个参数：要操作的元素、事件名称、和事件处理函数。
另一个函数是removeHandler(),它也接受相同的参数。职责是移除之前添加的事件处理程序（无论该事件处理程序采用什么方式添加到元素中的，如果其他方法无效，默认采用DOM0级方法）

此时可以写一个跨浏览器的事件处理程序的添加和删除函数了。

var EventUtil = {
        addHandler: function(element, type, handler){
            //浏览器是否支持DOM2
                if(elelment.addEventListener){
                element.addEventListener(type, handler, false);
        } 
        //浏览器是否支持IE
    else if(element.attachEvent){
                element.attachEvent("on"+type, handler);
        }
        //如果以上都不支持，采用DOM0级事件处理程序
        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对象

var btn  = document.getElementById("myBtn");
var handler= function（）{
//excute code
} ;
//创建一个事件处理程序
EventUtil.addHandler(btn, "click", handler);
//省略一些代码
//删除一个事件处理程序
EventUtil.removeHandler(btn, "click", handler);