12.3事件對象 1.每個元素身上的事件都是天生自帶的，不需要我們去定義，只需要我們給這個事件綁定一個方法， 2.事件綁定的寫法 1.div.onclick=function(){} DOM 0級事件綁定 2.div.addEventListener()或div.attachEvent() DOM2 ...
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
