js中的事件流和事件處理程序

js中的事件流和事件處理程序

HTML和js之間的交互是通過事件實現的。

事件流描述的是從頁面中接受事件的順序。

事件流

  • IE中的事件流是事件冒泡流。順序是從裡向外eg:div-body-html-Document
  • NetscapeCommunicator的事件流是事件捕獲流。順序是從外向裡eg:Document-html-body-div
  • DOM2級事件規定的事件流包括三個階段:事件捕獲階段、處於目標階段和事件冒泡階段,其中3到4是處於目標階段,如圖1所示。
js中的事件流和事件處理程序

事件處理程序

通過html特性來指定處理事件

js中的事件流和事件處理程序

事件處理程序中的代碼在執行時,有權訪問全局作用域中的任何代碼

為什麼會這樣呢???

通過html特性方式指定的事件處理程序會創建一個封裝這元素屬性值的函數,這個函數內部可以像訪問局部變量一樣訪問document及鈣元素本身的成員,神不神奇?這個函數使用with擴展自己的作用域:

js中的事件流和事件處理程序

通過javaScript指定事件處理程序的傳統方式,將一個函數賦值給一個事件處理程序屬性

js中的事件流和事件處理程序

刪除:

js中的事件流和事件處理程序

兩個方法,一個處理指定事件一個刪除,addEventListener()和removeEventListener()。這兩個方法分別接受三個參數:

(要處理的事件名、作為事件處理程序的函數、一個布爾值)true表示在捕獲階段調用函數,false表示在冒泡階段調用,一般使用false,這樣可以最大限度地兼容各種瀏覽器

通過addEventListener()添加的函數只能通過addEventListener()移除,所以,匿名函數無法移除

js中的事件流和事件處理程序

調用removeEventListener時與傳入addEventListener時的函數不同

js中的事件流和事件處理程序

與DOM中類似,兩個方法:attachEvent()和detachEvent(),接受兩個參數,同時由於IE8及更早版本只支持事件冒泡,所以通過這兩個方法添加的事件處理程序都會被添加到冒泡階段:(事件處理程序名稱、事件處理程序函數)

js中的事件流和事件處理程序

此處是onclick而不是click,與DOM方法不同的是這裡的事件處理程序會在全局作用域中運行,this等於window。添加的事件會被逆序執行。

使用EventUtil對象,封裝如下:

js中的事件流和事件處理程序

使用如下:

js中的事件流和事件處理程序

js中的事件流和事件處理程序

注:本篇文章內容來自紅皮書


分享到:


相關文章: