事件的三要素：操作什么對象（元素對象），操作的類型（點擊，移除，移入等），怎么操作（函數）

1、事件流：描述的是從頁面中接受事件的順序

IE：事件冒泡流

即事件最開始由最具體的元素接收，然后逐級向上傳播至最不具體的那個節點

N：事件捕獲流

不太具體的節點應該更早接收到事件，而具體的節點反而更晚接收到事件

2、事件處理程序

1）HTML事件處理程序：把事件直接添加到HTML結構中，缺點是js代碼和html代碼耦合在一起，不符合前端開發規范

2)DOM0級事件處理程序：較為傳統的方式，把一個函數賦值給一個事件處理程序屬性，優點在于簡單，兼容跨瀏覽器,用的比較多;可以給一個對象添加多個事件

btn.onclick=function(){};

刪除事件：btn.onclick=null;

3）DOM2級事件處理程序：

定義了2個方法，用于處理指定和刪除事件處理程序的操作

addEventListener() 和removeEventListener()

接收3個參數：要處理的事件名，作為處理程序的函數和布爾值（true表示捕獲事件，false表示在冒泡中處理）

對象.addEventListener("click",函數名,false); 注意：沒有on ,函數名沒有（）

刪除事件：用removeEventListener(),所接收的參數要一樣

特點：可以給一個對象添加多個事件，按順序執行

3、IE事件處理程序（IE 和 opera）

attachEvent() 添加事件

detachEvent() 刪除事件

接收相同的2個參數：事件處理程序的名稱和事件處理程序的函數

btn.attachEvent("onclick",函數名)? 注意：onclick需要加上on

4、跨瀏覽器的事件處理程序：需要把事件處理程序封裝到一個對象里，然后再調用這個對象的方法來實現

再封裝的時候需要做能力的檢測，支持DOM0級的，支持DOM2級的，支持IE事件處理程序的

封裝代碼：

var eventObJ = {

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;

}

}

}

5、DOM中的事件對象：在觸發DOM上的事件時都會產生一個對象，叫做事件對象event

event事件對象中常用的方法和屬性

備注：IE8前的event通過window.event來引用

1）type:用于獲取事件類型（click,mouseout）

2) target:目標，用于獲取這個事件用于什么對象

3）stopProPagation() :阻止世界冒泡，語法：event.stopPropagation()

4）preventDefault() 用于阻止事件的默認行為，比如組織a標簽默認的跳轉行為。語法：event.preventDefault()

6、IE中的事件對象

1）type：用于獲取事件類型（click,mouseout）

2）srcElement：目標，用于獲取這個事件用于什么對象

3）cancelBubble: 用于阻止事件冒泡，true為阻止冒泡，false為不阻止冒泡

4）returnValue： 值是false，表示阻止事件默認行為

7、事件的類型：鼠標事件，