事件

IE 事件类型： 冒泡（ event bubbling）

其他： 捕获（ event capturing）

通过HTML 指定事件处理程序的最后一个缺点是 HTML 与 JavaScript 代码紧密耦合

DOM0级方法 on

DOM2级事件处理程序

addEventListener(), removeEventListener() *
    用 DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。 *
    通过 addEventListener() 添加的匿名函数将无法移除

IE8 及更早版本只支持事件冒泡， 所以通过attachEvent() 添加的事件处理程序都会被添加到冒泡阶段
detachEvent()

夸浏览器用法
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;
        }
    }
    getEvent: function (event) {
        return event ? event : window.event;
    },
    getTarget: function (event) {
        return event.target || event.srcElement;
    },

    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    stopPropagation: function (event) {


        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

属性 / 方法 类 型 读 / 写 说 明
bubbles Boolean 只读 表明事件是否冒泡
cancelable Boolean 只读 表明是否可以取消事件的默认行为
currentTarget Element 只读 其事件处理程序当前正在处理事件的那个元素
defaultPrevented Boolean 只读 为 true 表示已经调用了 preventDefault()（ DOM3级事件中新增）
detail Integer 只读 与事件相关的细节信息
eventPhase Integer 只读 调用事件处理程序的阶段： 1 表示捕获阶段， 2 表示“ 处于目标”， 3 表示冒泡阶段

preventDefault() Function 只读 取消事件的默认行为。 如果cancelable是true， 则可以使用这个方法
stopImmediatePropagation() Function 只读 取消事件的进一步捕获或冒泡， 同时阻止任何事件处理程序被调用（ DOM3级事件中新增）
stopPropagation() Function 只读 取消事件的进一步捕获或冒泡。 如果bubbles为true， 则可以使用这个方法
target Element 只读 事件的目标
trusted Boolean 只读 为true表示事件是浏览器生成的。 为false表示事件是由开发人员通过 JavaScript 创建的（ DOM3级事件中新增）
type String 只读 被触发的事件的类型
view AbstractView 只读 与事件关联的抽象视图。 等同于发生事件的window对象

事件类型
     UI（User Interface，用户界面）事件，当用户与页面上的元素交互时触发；
     焦点事件，当元素获得或失去焦点时触发；
     鼠标事件，当用户通过鼠标在页面上执行操作时触发；
     滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
     文本事件，当在文档中输入文本时触发；
     键盘事件，当用户通过键盘在页面上执行操作时触发；
     合成事件，当为 IME（Input Method Editor，输入法编辑器）输入字符时触发；
     变动（mutation）事件，当底层 DOM 结构发生变化时触发。
     变动名称事件，当元素或属性名变动时触发。此类事件已经被废弃，没有任何浏览器实现它们，
    因此本章不做介绍。

*内存和性能
    1.事件委托
        对“事件处理程序过多”问题的解决方案就是事件委托。
    2.移除事件处理程序
        btn.onclick = function(){ 
        //先执行某些操作
        btn.onclick = null; //移除事件处理程序
        document.getElementById("myDiv").innerHTML = "Processing..."; 
        }; 

    3.DOM中事件模拟
        createEvent() 方法创建event对象
        dispatchEvent() 触发模拟事件

        var textbox = document.getElementById("myTextbox") 
        //创建事件对象
        var event = document.createEvent("KeyEvents"); 
        
        //初始化事件对象
        event.initKeyEvent("keypress", true, true, document.defaultView, false, false, 
        false, false, 65, 65); 
        //触发事件
        textbox.dispatchEvent(event);

        内存与性能方面的问题。
         有必要限制一个页面中事件处理程序的数量，数量太多会导致占用大量内存，而且也会让用户
        感觉页面反应不够灵敏。
         建立在事件冒泡机制之上的事件委托技术，可以有效地减少事件处理程序的数量。
         建议在浏览器卸载页面之前移除页面中的所有事件处理程序