使用事件处理程序

1.HTML事件处理程序

即事件直接加在HTML结构里面的

<input type="button" value="按钮" onclick="show()">
<script>
Function show(){
Alert("hello ");
}
</script>

该事件处理的缺点是和html和js的耦合性很高，一个地方发生更改时，要修改多处地方
在调用函数的时候才在其后面加括号（），如果要进行函数传参数，直接写函数名就行

2.DOM0级事件处理程序

较传统的方式是：把一个函数赋值给一个事件的处理程序属性

    <div>
        <input type="button" value="按钮" id="btn">
    </div>
    <script>
        var btn=document.getElementById('btn');
        btn.onclick=function (){
            alert('这是通过DOM0级添加的事件！')
        }
        btn.onclick=null;
    </script>

即获取对应添加事件的对象，然后添加onclick点击的属性，触发事件处理程序，如果要移除点击事件，把onclick属性赋值为null，该事件处理程序没有HTML事件处理程序的缺点

3.DOM2级事件处理程序

DOM2级事件处定义了两个方法：
用于处理指定和删除事件处理程序的操作
addEventListener()和removeEventListener().
接收三个参数：要处理的事件名，作为事件处理程序的函数和布尔值（true表示为在事件捕获时执行事件处理函数，false表示为在事件冒泡的时候执行事件处理函数）
其中addEventListener的第一个参数为触发的事件类型，不用想DOM0级事件类型加on，直接类型名就行，如“click”，“mouseover”，第二个参数为函数名字，直接写函数名，不用加（）括号，第三个参数一般选择false，即事件冒泡，这样能兼容很多浏览器；
通过addEventListener添加的事件要通过removeEventListener()才能移除，而且参数要和之前添加的一样

4.IE事件处理程序

不用加第三个参数false和true来判断事件流类型，因为IE8或者更早的浏览器只支持事件冒泡；
在传递第一个参数事件类型时要注意要加on，即“onclick”“onmouseover”，因为它和DOM事件不同；
IE事件处理程序只支持IE 浏览器和opera 浏览器

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

    //跨浏览器事件处理程序 
    var 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.attachEvent){
                element.detachEvent("on"+type,handler);
            }else{
                element["on"+type]=null;
            }
        }
    }
    eventUtil.addHandler(btn,'click',showMessage);