事件处理程序/事件侦听器

事件处理程序：是一个响应事件的函数，函数名以on开头

---

为事件指定处理程序的方式：
1. HTML事件处理程序
2. DOM0级事件处理程序
3. DOM2级事件处理程序
4. IE事件处理程序
5. 跨浏览器事件处理程序

---

1.【HTML事件处理程序】

使用一个HTML特性（与事件处理程序同名）来指定元素的事件,如”onclick”

<input type ="button" value="click me" onclick="alert('click me')"/> //click me

1.通过event变量，可以访问事件对象

<input type="button" value="Click me" onclick="alert(event)"/>   //[object MouseEvent]

<input type="button" value="Click me" onclick="alert(event.type)"/> //click

2.  通过this，可以访问事件的目标元素

<input type="button" value="Click me" onclick="alert(this)"/>    //[object HTMLInputElement]
<input type="button" value="Click me" onclick="alert(this.value)"/>//Click me

3.可以访问document和元素本身的成员（扩展作用域）

<input type="button" value="Click me" onclick="alert(value)">   //Click me
<input type="button" value="Click me" onclick="alert(type)">   //button
<input type="button" value="Click me" onclick="alert(document)">   //[object HTMLDocument]
<form method="post">
     <input type="text" name="username" value="">
     <input type="button" value="echo username" onclick=" alert(username.value)">
</form>

【缺点】
    ○ 时差问题（用户可能在事件处理程序具备执行条件之前就触发了该事件）
    解决：将HTML事件处理程序装在一个try-catch中
    ○ 其扩展的作用域在不同浏览器会导致不同的结果，可能会在访问非限定对象成员时出错
    ○ HTML与Js代码紧密耦合，如果要改动，两处都要改。

---

2.【 DOM0级事件处理程序】

将执行函数赋值给一个事件处理程序属性（该属性以on开头，全部小写）

1.在冒泡阶段被处理
2.在元素的作用域中运行，this引用当前元素
    <input type="button" id="btn" value="Click me">
    var btn = document.getElementById("btn");
    //将执行函数赋值给事件处理程序属性onclick
    btn.onclick = function(){
        alert("click me");     // click me
        alert(this.id);    // btn
    };
3. 将属性值设为null就可删除事件处理程序
    btn.onclick = null; //再单击按钮不会发生任何动作

---

3.【DOM2级事件处理程序】

使用事件处理程序方法 “addEventListener(事件名，执行函数，布尔值（true为捕获阶段调用，false为冒泡阶段调用）)”

1.在元素的作用域中运行，this引用当前元素
    <input type="button" id=" btn" value="Click me">
    var btn = document.getElementById("btn");
        function handler(){
            alert(this.id);
        }
    btn.addEventListener("click", handler, false);    // btn
2.可以添加多个事件处理程序（按照顺序触发）
3.使用删除事件处理程序方法removeEventListener(3个属性值与addEventListener完全一致)可删除事件处理程序
    btn.removeEventListener("click", handler, false);  //  删除事件处理程序

---

4.【IE事件处理程序】

（在冒泡阶段被调用）IE10及以下版本才支持，IE11及以上不支持。
使用事件处理程序方法 “attachEvent（事件处理程序名，执行函数)”

1.在全局作用域中运行，this指向window
    <input type="button" id=" btn" value="Click me">
    var btn = document.getElementById("btn");
    function handler(){
        alert(this);
    }
    btn.attachEvent("onclick",handler);  //[object window] 
2.可以添加多个事件处理程序（按照逆序触发）
3.使用删除事件处理程序方法detachEvent(事件处理程序名，执行函数)就能删除事件处理程序
    btn.detachEvent("onclick",handler);  //删除事件处理程序

---

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

创建EventUnit对象，处理浏览器间的差异

var btn = document.getElementById("btn");
    function handler(){
        alert("click!");
    };
    var EventUnit = {
        addHandler: function (element, type, handler) {
                //DOM2级事件处理程序
                if (element.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) {
                //DOM2级删除事件处理程序
                if (element.removeEventListener) {
                    element.removeEventListener(type, handler, false);
                }
                //IE删除事件处理程序
                else if (element.detachEvent) {
                    element.detachEvent("on" + type, handler);
                }
                //DOM0级删除事件处理程序
                else {
                    element["on" + type] = null;
                }
        }
    };
    EventUnit.addHandler(btn,"click",handler); // 添加事件处理程序
    EventUnit.removeHandler(btn,"click",handler); //删除事件处理程序

【缺点1】: 
EventUnit的两个方法addHandler和removeHandler没有考虑全面，比如IE的全局作用域，而DOM的元素作用域；
【缺点2】：
DOM0级每个事件只支持一个事件处理程序，而DOM2级和IE支持多事件处理程序