JavaScript中的事件处理程序

事件：指文档或浏览器窗口中发生的特定的交互瞬间。JavaScript<——>HTML
事件流：描述的是从页面中接受事件的顺序，包括IE提出的事件冒泡流（即事件最开始由最具体的元素接收，然后逐级向上传播至最不具体的节点或文档）和Netscape提出的事件捕获流（即不太具体的节点应该更早接收事件，而最具体的节点最后接收事件）。

事件处理程序分为一下几类：

1.HTML事件处理程序
事件加在HTML代码中，这种方法缺点就是HTML和js代码耦合度很高，如果要修改就要修改HTML元素和JavaScript函数。

<input type="button" value="按钮" id="btn" onclick="showMes()">
<script>
        function showMes(){
            alert('Hello');
        }
</script>

2.DOM0级事件处理程序
这种方法是我们最常用的方法，也是一种较传统的方法，先把元素取出来，然后为其属性添加一个事件的方法，有着简单、跨浏览器的优势。

<input type="button" value="按钮2" id="btn2">
<script>
var btn2=document.getElementById('btn2');
        btn2.onclick=function(){
            alert('这是通过DOM0级添加的事件');
        }
        //btn2.onclick=null;//当删除onclick属性时将其置为null
</script>

3.DOM2级事件处理程序
IE不支持这种处理方法，IE有接下来4.专用的事件处理程序。
添加事件处理程序addEventListener(事件名，事件处理函数，事件流）注意，事件名是不加on的属性名，事件流是一个布尔值，一般为false表示事件冒泡。
同样地，删除事件处理程序removeEventListener(事件名，事件处理函数，事件流）。通过AddEventListener添加的属性只能通过removeEventListener移除，不能采用其他事件处理程序。

<input type="button" value="按钮3" id="btn3">
<script>
    var btn3=document.getElementById('btn3');
    btn3.addEventListener('click',showMes,false);
        btn3.addEventListener('click',function(){
            alert(this.value);
        },false);
</script>

从以上代码可知，DOM0级和DOM2级的共同特点是可以给一个元素添加多个事件处理程序，会按顺序执行。

4.IE事件处理程序
适用于IE、OPERA，与DOM事件处理程序的参数类似，但不适用第三个参数，因为IE8及更早的版本只支持事件冒泡。
添加事件attachEvent(事件名，事件处理函数)
删除事件detachEvent(事件名，事件处理函数)
注意，这里的事件名是加上on的事件属性，与前一种区分开来。

<input type="button" value="按钮3" id="btn3">
<script>
    var btn3=document.getElementById('btn3');
    btn3.attachEvent('onclick',showMes);
</script>

为了解决不同浏览器事件处理方法的区别，我们可以把事件封装在一个对象中，创建方法来解决这种跨浏览器，对不同事件处理程序进行判断，当满足条件时就执行相应的处理程序。
在JavaScript中，用.连接的字符串可以改为用[]连接。例如，element.οnclick===element[‘onclick’]

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.detachEvent){
                    element.detachEvent('on'+type,handler);

                }else{
                    element['on'+type]=null;
                }
            }
        }

因此，为按钮3添加事件处理程序可以写成一下代码：

eventUtil.addHandler(btn3,'click',showMes);