1.常用的事件     

……

2.每個元素身上的事件是天生自帶的，不需要我們去定義，只需要我們給這個是事件繫結一個方法，當事件觸發的時候就會執行這個方法。

3.事件繫結的寫法

1.div.onclick=function(){}  DOM0級事件繫結

2.div.addEventListener()或div.attachEvent()  DOM2級事件繫結

二者的區別

Onclick是這個元素私有的屬性，天生自帶的，而addEventListener()是公有的屬性，從EventTarget(事件源)物件上繼承來的。

Ie低版本的attachEvent是公有的。

Div.onclick 存在事件冒泡機制沒有捕獲機制

Div.addEventListener() 可有冒泡可有捕獲

Div.attachEvent()只有冒泡機制

4.div.addEventListener和div.attachEvent的區別

1.前者有冒泡和捕獲機制，後者只有冒泡機制

2.事件名前者不帶on後者帶on

3.前者this指向當前元素，後者指向window

4.前者是標準瀏覽器的寫法，後者是ie8以下

Arguments

每個函式都有一個arguments物件，他是這個函式所有引數構造的集合

上面的控制檯是arguments陣列中有一個元素叫mouseevent。

所以，每個事件的方法中瀏覽器都給他一個引數叫mouseevent。我們所有滑鼠的資訊都臨時儲存在這個mouseevent物件上。

Mouseevent有相容性

標準瀏覽器可以直接讀取，但是ie不行

解決辦法

Event物件的相容性

clientX和clientY是滑鼠到瀏覽器視窗左上角的距離座標

pageX和pageY是滑鼠到網頁左上角的距離座標，但是ie低版本沒有這個屬性

在ie下怎麼算pageY的值 用clientY+scrollTop

事件源 點選哪個元素，哪個元素就是事件源

標準瀏覽器的事件源是ev.target

Ie6-8沒有這個屬性 但是ie有ev.srcElement

阻止事件冒泡相容性

1.event.cancelBubble=true

2.event.stopPropagation?event.stopPropagation():event.cancelBubble=true

阻止事件預設行為相容性

比如 a的href

Href為空 會自動重新整理頁面

Href為# 錨點跳轉

Href為javascript:;阻止預設行為的發生

Event.preventDefault?Event.preventDefault():event.returnValue=false

預習

1.取消預設行為

document.getElementById("a").onclick=function(event){

        var event=event||window.event

        if(event.preventDefault){

            event.preventDefault()

        }else{

            event.returnValue=false

        }

        console.log(window.event)

    }

2.事件源

事件繫結剖析

事件繫結的方式

有這兩種方式，這說明了onclick和addEventLiatener是aa的兩個屬性那麼我們用dir(aa)來看看在控制檯我們發現onclick是定義在私有屬性上的

我們發現私有的沒有adddEventListener 然後檢視公有的用__proto__向上查詢，直到eventTarget是才發現有了addEventListener(),說明合格add……方法是在EventTarget這個類上的原型上的方法。

所以我們把onclick這種事件繫結稱之為DOM零級操作方式

addEventListen而稱為DOM2級事件繫結。

在event物件上

Event.type沒有相容性

Event.clientX/event.clientY沒有相容性 當前滑鼠觸發點距離螢幕左邊和上邊的距離

Event.target有相容性

事件源  當前滑鼠觸發的那個元素

Ie下沒有target屬性 有srcElement

還有一個e.pageX e.pageY

跟隨滑鼠走

Onmouseenter和onmouseleave 這兩個事件 瀏覽器預設阻止了冒泡傳播

Onmouseover和onmouseout沒有阻止