JavaScript事件

事件流

事件冒泡

IE的事件流叫做事件冒泡,即事件開始時由具體的元素接收,然后逐級向上傳播到較為不具體的節點。

事件捕獲

思想是不太具體的節點應該更早接收到事件,而最具體的節點應該最后接收到事件。用意在事件到達預定目標前捕獲它。

事件流

DOM2級事件規定的事件流包括三個階段:事件捕獲階段、處于目標階段和事件冒泡階段。首先發生的是事件捕獲,為截獲事件提供了機會。然后是實際的目標接收到事件。最后一個階段是冒泡階段,可以在這個階段對事件作出響應。

事件處理程序

HTML事件處理程序

某個元素支持的每種事件,都可以使用一個與相應事件處理程序同名的HTML特性來指定。這個特性的值應該是能夠執行的JavaScript代碼。

缺點:時差問題;作用域鏈在不同瀏覽器中會導致不同的結果;代碼緊耦合。

DOM0級事件處理程序

通過JavaScript指定事件處理程序的傳統方式,就是講一個函數賦值給一個事件處理程序屬性。

DOM2級事件處理程序

定義了兩個方法,用于處理指定和刪除事件處理程序的操作:addEventListener、removeEventListener。所有DOM節點都包含著兩個方法,并且它們都接受三個參數:要處理的事件名,作為事件處理程序的函數和一個布爾值。最后這個布爾值true,表示在捕獲階段調用事件處理程序;false,表示在冒泡階段調用事件處理程序。

使用DOM2級方法添加事件處理程序的主要好處是可以添加多個事件處理程序。

IE事件處理程序

attachEvent、detachEvent。參數都是:事件處理程序名稱,事件處理程序函數。

跨瀏覽器的事件處理程序

要保證處理事件的代碼能在大多數瀏覽器下一致運行,只需關注冒泡階段。

事件對象

DOM中的事件對象

兼容DOM的瀏覽器會將一個event對象傳入到事件處理程序中。無論指定事件處理程序時使用什么方法(DOM0級或DOM2級),都會傳入event對象。

IE中的事件對象

DOM0級window.event

使用attachEvent時,函數是有一個event的參數的

跨瀏覽器的事件對象

事件類型

UI事件,當用戶與頁面上的元素交互時觸發;

焦點事件,當元素獲得或失去焦點時觸發;

鼠標事件,當用戶通過鼠標在頁面執行操作時觸發;

滾輪事件,當使用鼠標滾輪或類似設備時觸發;

文本事件,當在文檔中輸入文本時觸發;

鍵盤事件,當用戶通過鍵盤在頁面上執行操作時觸發;

合成事件,當為IME輸入字符時觸發;

變動事件,當底層DOM結構發生變化時觸發;

變動名稱事件,當元素或屬性名變動時觸發,已廢棄。

UI事件

load:當頁面完全加載后再window上面觸發,當所有框架都加載完畢時在框架集上面觸發,當圖像加載完畢時在<img>元素上面觸發,當嵌入的內容加載完畢時在<object>元素上觸發;

unload:當頁面完全卸載后在window上面觸發,當所有框架都卸載后在框架集上面觸發,當嵌入的內容卸載完畢后在<object>元素上面觸發;

abort:在用戶停止下載過程時,如果嵌入的內容沒有加載完,則在<object>上面觸發;

error:當js錯誤時在window上面觸發,當無法加載圖像時在<img>上面觸發,當無法加載嵌入內容時在<object>元素上面觸發,當有一個或多個框架無法加載時在框架集上賣弄觸發

select:當用戶選擇文本框<input>或<textarea>中的一或多個字符時觸發

resize:當窗口或框架大小變化時在window或者框架上面觸發

scroll:當用戶滾動帶滾動條的元素中的內容時,在該元素上面觸發。<body>元素包含所加載頁面的滾動條

焦點事件

blur:在元素失去焦點時觸發,這個事件不會冒泡;所有瀏覽器都支持它

focus:在元素獲得焦點時觸發;不會冒泡,所有瀏覽器都支持

focusing:在元素獲得焦點時觸發

focusout:失去焦點時觸發

鼠標和滾輪事件

click:用戶單擊主鼠標按鈕或者按下回車鍵時觸發

dbclick:在用戶雙擊主鼠標按鈕時觸發

mousedown:用戶按下了任意鼠標按鈕時觸發

mouseenter:在鼠標光標從元素外部首次移動到元素范圍之內時觸發

mouseleave:在位于元素上方的鼠標光標移動到元素范圍之外時觸發。

mousemove:當鼠標指針在元素內部移動時重復的觸發

mouseout:在鼠標指針位于一個元素上方,然后用戶將其移入另一個元素時觸發

mouseover:在鼠標指針位于一個元素外部,然后用戶將其首次移入另一個元素邊界之內時觸發

mouseup:在用戶釋放鼠標按鈕是觸發

鍵盤與文本事件

keydown:用戶按下鍵盤上的任意鍵時

keypress:用戶按下鍵盤上的字符鍵時

keyup:用戶釋放鍵盤上的鍵

textInput:文本事件,先于keypress

復合事件

變動事件

HTML5事件

contextmenu

beforeunload

readystatechange

設備事件

觸摸與手勢事件

內存和性能

事件委托

移除事件處理程序

模擬事件

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 事件處理程序在應用中是必不可少的,雖然現在很多框架都有自己實現事件處理方法,但是熟知原生才能讓我們應對各種各樣的需...
    俗三瘋閱讀 301評論 0 1
  • 一、事件流 1.1 事件流 事件流:從頁面中接受事件的順序 事件冒泡:即事件開始時由最具體的元素(文檔中嵌套層次最...
    范小飯_閱讀 1,084評論 1 9
  • 事件流 事件流描述的是從頁面中接受事件的順序。但是IE和Netscape開發團隊提出了差不多相反的事件流的概念。I...
    losspm閱讀 274評論 0 0
  • 事件基本概念 事件類型:用來說明發生什么類型事件的字符串,即事件名。事件目標:發生事件的對象。當談論事件時,會同時...
    留七七閱讀 1,059評論 0 11
  • 最近看了不少關于測試的文章、博客、這篇文章是前不久看的,和大家分享一下,不知道作者和出處,這里就不標明,希望原作者...
    LP_ProgramLife閱讀 1,013評論 4 23