12.3事件物件

1.每個元素身上的事件都是天生自帶的，不需要我們去定義，只需要我們給這個事件繫結一個方法，

2.事件繫結的寫法

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

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

　　　　二者的區別

　　　　onclick是這個元素私有的屬性，天生自帶的，而addEventListener（）是公有屬性，從EvenTarget（事件源）物件繼承來的

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不行

解決辦法

Evenet物件的相容性

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

事件委託

如果子元素身上繫結大量相同的事件，我們儘量採用事件委託，所有子元素把自己的事件委託給父級了。

原理:採用事件冒泡機制完成

為什麼使用事件委託呢

傳統的for迴圈繫結事件，會增加大量的dom操作（事件），影響頁面效能，採用事件委託就是把所有的事件基於一個元素上

事件委託和傳統的事件繫結的優勢

傳統的事件繫結對新增元素不起作用，事件委託起作用

傳統的事件繫結，有多少元素js就需繫結多少事件，事件委託只需要一個事件

案例

事件委託建議採納

5.並不是所有的事件都存在事件冒泡

onmouseenter onmouseleave就沒有事件冒泡機制

所有我們跟隨滑鼠的時候儘量用這兩個事件，不要mouseover mouseout

作者：晉飛翔

QQ：318080891