一、事件流

事件流描述的是從頁面中接受事件的順序。
IE的事件流是事件冒泡流，而Netscape的事件流是事件捕獲流
1、事件冒泡
事件冒泡，即事件最開始由最具體的元素(文件中巢狀層次最深的那個節點)接收，然後逐級向上轉播至最不具體的節點(文件)。
2、事件捕獲
事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點最後接收到事件。

二、事件處理程式

1、HTML事件處理程式
2、DOM0級事件處理程式
3、DOM2級事件處理程式

DOM2級事件定義了兩個方法：用於處理指定和刪除事件處理程式的操作：addEventListener()和removeEventListener()。它們都接收三個引數：要處理的事件名、作為事件處理程式的函式和一個布林值。
相關知識連結：

addEventListener第三個引數作用

4、IE事件處理程式
attachEvent()新增事件
detachEvent()刪除事件
這兩個方法接收相同的兩個引數：事件處理程式名稱與事件處理函式
5、跨瀏覽器的事件處理程式

三、事件物件

事件物件event
1、DOM中的事件物件
(1)、type:獲取事件型別
(2)、target：事件目標
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的預設行為
2、IE中的事件物件
(1)、type:獲取事件型別
(2)、srcElement：事件目標
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的預設行為

js跨瀏覽器事件處理機制，封裝程式碼如下：

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;
    },
    //阻止預設事件比如a連結跳轉
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    //阻止事件冒泡
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
}