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

事件綁定的寫法

1.div.onclick=function（）{}···DOM0級

2.div.addEventLostener（）或div.attachEvent（）···DOM2級

二者區別

onclick是這個元素的私有屬性，天生自帶的，而addEventLostener（）是公有屬性

ie低版本的attachEvent（）是公有的

div.onclick=function（）{}存在事件冒泡機制沒有捕獲機制

div.addeventLostener（）可有冒泡可有捕獲

div.attachevent（）只有冒泡

div.addeventLostener（）和div.attachWvent（）區別

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

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

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

4.

arguments

每個函數都有一個arguments對象，他是這個函數所有參數構成的集合

每個事件的方法中瀏覽都給他一個參數叫mouseevent，我們所有鼠標的信息都臨時存儲在這個mouseevent對象上

mouseevent有兼容性

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

解決方法

div.onclick=function（ev）{

var ev=ev||window.event

}

event對象的兼容性

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

pageX和pageY是鼠標到頁面左上角的坐標，但是ie低版本沒有這個屬性

在ie下怎麽算clientY的值是用clientY+scrolltop

事件源 點擊那個元素，哪個元素就是事件源

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

ie6-8沒有這個屬性，但是ie有ev.srcelement

事件冒泡

1.event.cancelbubble=true

event.stopPropagation？event.stopPropagation（）：event.cancelbubble=true

阻止事件默認行為兼容性

比如a的href

href為空會自動刷新頁面

href為#錨點跳轉

href為javascript:;阻止默認行為發生

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

事件委托

如果子元素身上綁定大量相同的事件，我們盡量采用事件委托，所有子元素把自己的事件委托給父級

原理：采用事件冒泡機制完成的

為什麽使用事件委托呢？

傳統的for循環綁定事件，會增加大量的dom操作（事件），影響頁面性能，采用事件委托就是把所有的事件基於一個元素

事件委托和傳統的事件綁定的優勢

傳統的事件綁定對新增元素不管用。事件委托對新增的元素起作用

傳統的事件綁定，有多少元素js就需要綁定多少事件，事件委托只需要一個事

事件及事件委托