JS事件

　　因爲寫隨筆時，已經學習並大量使用過JS事件以及事件監聽函數，所以不會事無鉅細地舉例子

 

定義

事件

　　事件，便可被JavaScript偵測到的行爲

　　也就是用戶和頁面交互時，解釋器會建立的響應event對象，描述事件的信息

句柄

　　事件發生時執行的代碼，用一個函數包裹起來

 

類型

DOM0級事件

　　即在DOM元素後加上事件類型以及事件處理函數

　　DOM0級事件中，一個元素只能夠添加一個事件和一個句柄，若是綁定多個則以最後一個綁定的事件和句柄爲準

DOM2級事件

　　在DOM元素後加上addEventListener方法，第一個參數爲事件類型，第二個參數爲事件句柄，第三個參數爲事件冒泡/捕獲（布爾值，默認爲false（冒泡））

　　能夠給一個元素添加屢次addEventListener，從而綁定多個事件類型和事件句柄

　　也能夠給元素使用removeEventListener方法，移除DOM事件，三個參數同addEventListener一致，但須要注意綁定事件時，事件句柄不可爲匿名函數（不然沒法識別要解綁哪一個句柄）

IE的事件處理

　　IE中事件的綁定用attachEvent，第一個參數爲事件類型（加上on，例如click變成onclick），第二個爲事件句柄

　　移除事件用detachEvent，兩個參數同attachEvent，可是事件句柄必須不能爲匿名函數

 

結合以上，能夠經過判斷是否有addEventListener/removeEventListener方法，來封裝一個跨瀏覽器的事件處理函數

 

事件冒泡&捕獲

事件冒泡

　　HTML裏，元素之間會存在親子關係，當子一級元素綁定事件時，若是父級元素也綁定了同類型的事件，則子元素觸發事件時，父元素事件也會被觸發

　　也就是說，事件觸發後，會沿着DOM樹往上找，若是直系父元素也有同類型事件則觸發，即爲事件冒泡

事件捕獲

　　同事件冒泡相反，當父元素綁定事件時，若是子一級元素也綁定了同類型的事件，則父元素觸發事件時，子一級元素事件也會被觸發

事件委託

　　事件委託利用了事件冒泡的原理，在父元素上綁定須要觸發的事件類型以及事件句柄，當子元素觸發同類型事件時，父元素就會被觸發並執行事件句柄

　　這樣一來減小了事件綁定的次數，也縮減了代碼量

 

Event對象

　　在給DOM元素添加事件時，會生成一個event對象，其帶有衆多屬性和方法

屬性

　　type：返回當前綁定事件的類型（click等），能夠在同一DOM對象上綁定同一事件句柄，在事件句柄中判斷事件類型並做出不一樣處理

　　target/currentTarget：返回觸發事件的對象/綁定事件的對象，例如父元素綁定事件時，點擊子元素，target返回子元素，currentTarget返回父元素

（未完待續）