JS 事件揭秘

事件是文档或浏览器窗口种发生的特定的交互瞬间。Javascript 与 HTML 之间的交互，都是通过事件完成的。

事件流

事件流，描述的是从页面中接受事件的顺序。
IE —— 事件冒泡流：事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。
netscape —— 事件捕获流：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

事件处理程序

1. HTML 事件处理程序
   缺点：HTML 和 JS 代码，紧密的耦合在一起

2. DOM 0级事件处理程序
   是较传统的方式，把一个函数赋值给一个事件的处理程序属性，用得较多。

3. DOM 2级事件处理程序
   DOM 2级事件定义了两个方法：用于处理指定(addEventListener())和删除(removeEventListner())事件处理程序的操作，接收三个参数：要处理的事件名、作为事件处理程序的函数、布尔值（指定事件是否在捕获或冒泡阶段执行，true - 事件句柄在捕获阶段执行，false- false- 默认，事件句柄在冒泡阶段执行）。

4. IE事件处理程序

   • 添加事件：attachEvent()
   • 删除事件：detachEvent()
   • 接收两个参数：要处理的事件名、作为事件处理程序的函数。

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.detachEvent) {
            element.detachEvent('on' + type, handler);
        } else {
            element['on' + type] = null;
        }
    },
    getEvent: function (event) {
        return event ? event : window.event;
    },
    getType: function (event) {
        return event.type;
    },
    getElement: 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;
        }
    }
}

事件对象

在触发 DOM 上的事件时，都会产生一个对象，即事件对象 event。

1. DOM 中的事件对象

   • type属性：用于获取事件类型
   • target属性：用于获取事件目标
   • stopPropagation()方法：用于阻止事件冒泡
   • preventDefault()方法：阻止事件的默认行为

2. IE中的事件对象

   • type：获取事件类型
   • srcElement：事件目标
   • cancelBubble=true：阻止事件冒泡
   • returnValue=false：阻止事件的默认行为