JavaScript 事件

前言：

　　一、客戶端 JavaScript 程序採用了異步事件驅動編程模型

　　二、事件不是 JavaScript 對象，不會出如今程序源代碼中

　　三、事件類型是一個用來講明發生什麼類型事件的字符串，有時會稱之爲事件名字

　　四、事件目標是發生的事件或與之相關的對象，當講事件時，咱們必須同時指明事件類型和事件目標

　　五、事件處理程序或事件監聽程序是處理或響應事件的函數

　　六、事件對象是與特定事件相關且包含有關該事件詳細信息的對象；事件對象做爲參數傳遞給事件處理程序函數（不包括 IE8 及以前版本）；

　　　  全部的事件對象都有用來指定事件類型的 type 屬性和指定事件目標的 target 屬性（IE8 及以前版本採用 srcElement 而非 target）；

　　　  每一個事件類型都爲其相關事件對象定義一組屬性

　　七、事件傳播是瀏覽器決定哪一個對象觸發其事件處理程序的過程，對於單個對象的特定事件（如 Window 對象的 load 事件），必須是不能傳播的

　　八、當文檔元素上發生某個類型的事件時，它們會在文檔樹上向上傳播或「冒泡」

　　九、事件傳播的另外一種形式稱爲事件捕獲，在容器元素上註冊的特定處理程序有機會在事件傳播到真實目標以前攔截（或「捕獲」）它，

　　　  IE8 及以前版本並不支持事件捕獲

　　十、事件處理程序能夠經過返回一個適當的值、調用事件對象的某個方法或設置事件對象的某個屬性來阻止默認操做的發生

注：冒泡和捕獲定義了事件觸發的順序；冒泡是從內部事件對象自己開始觸發事件，而後依次向其祖先元素冒泡觸發事件，

　　而捕獲則是在其祖先元素先觸發，而後再往其自身方向依次觸發事件

 

事件類型：

　　一、傳統事件類型：

　　　　① 表單事件：

　　　　　　a、當提交表單和重置表單時，<form> 元素會分別觸發 submit 和 reset 事件

　　　　　　b、當用戶和類按鈕表單元素（包括單選按鈕和複選框）交互時，它們會發生 click 事件

　　　　　　c、當用戶經過輸入文字、選擇選項或選擇複選框來改變相應表單元素的狀態時，這些一般維護某種狀態的表單元素會觸發 change 事件；

　　　　　　     對於文本輸入域，只有用戶和表單元素完成交互並經過 Tab 鍵或單擊的方式移動焦點到其餘元素上時纔會觸發 change 事件

　　　　　　d、不管用戶什麼時候輸入文字（經過鍵盤或剪切和粘貼）到 <textarea> 和其餘文本輸入表單元素，除 IE 外的瀏覽器都會觸發 input 事件

　　　　　　e、響應通過鍵盤改變焦點的表單元素在獲得和失去焦點時會分別觸發 focus 和 blur 事件，這兩個事件

　　　　　　　  不會冒泡（focusin 和 focusout 能夠代替它們，且能夠冒泡），但其餘全部表單事件均可以

　　　　

　　　　② Window 事件：指事件的發生與瀏覽器窗口自己而非窗口中顯示的任何特定文檔內容相關

　　　　　　a、當文檔和其餘全部外部資源徹底加載並顯示給用戶時會觸發 load 事件

　　　　　　b、當用戶離開當前文檔轉向其餘文檔時會觸發 unload 事件

　　　　　　c、beforeunload 事件和 unload 相似，但它能提供詢問用戶是否肯定離開當前頁面的機會

　　　　　　   （該事件的處理程序若是返回字符串，則會在新頁面加載以前展現給用戶看，這樣用戶就有機會取消跳轉）

　　　　　　d、當圖片（或其餘網絡資源）由於用戶中止加載進程而致使失敗就會觸發 abort 事件（部分瀏覽器支持）

　　　　　　e、當瀏覽器窗口從操做系統中獲得或失去鍵盤焦點時會觸發 focus 和 blur 事件

　　　　　　f、當用戶調整瀏覽器窗口大小或滾動它時會觸發 resize 和 scroll 事件（scroll 事件也能在任何能夠滾動的文檔元素上觸發）

　　　　　　注：Window 對象的 onerror 屬性有點像事件處理程序，當 JavaScript 出錯時會觸發它，但它並非真正的事件處理程序，

　　　　　　　　由於它不能用不一樣的參數來調用

 

　　　　③ 鼠標事件：當用戶在文檔上移動或單擊鼠標時都會產生鼠標事件，該類事件會「冒泡」

　　　　　　a、用戶每次移動或拖動鼠標時，會觸發 mousemove 事件

　　　　　　b、當用戶按下或釋放鼠標按鍵時，會觸發 mousedown 和 mouseup 事件

　　　　　　c、在 mousedown 和 mouseup 事件隊列以後，瀏覽器也會觸發 click 事件

　　　　　　d、當用戶在至關短的時間內連續兩次單擊鼠標按鍵，跟在第二個 click 事件以後就是 dblclick 事件

　　　　　　e、在顯示菜單以前，一般會觸發 contextmenu 事件，而取消這個事件就能夠阻止菜單顯示

　　　　　　f、當用戶移動鼠標指針從而懸停在新元素上或再也不懸停在某個元素上時，會觸發 mouseover 和 mouseout 事件（會「冒泡」）

　　　　　　g、IE 提供了不會冒泡版本的 mouseenter 和 mouseleave，JQuery 模擬非 IE 的瀏覽器中這些事件的支持

　　　　　　h、當用戶滾動鼠標滾輪時，瀏覽會觸發 mousewheel 事件（在 Firefox 中是 DOMMouseScroll 事件）

 

　　　　④ 鍵盤事件：當鍵盤聚焦到 Web 瀏覽器時，用戶每次按下或釋放鍵盤上的按鍵時都會產生事件

　　　　　　a、不管什麼時候按下或釋放按鍵（甚至是輔助鍵）都會觸發 keydown 和 keyup 事件

　　　　　　b、當 keydown 事件產生可打印字符時，在 keydown 和 keyup 之間會觸發另外一個 keypress 事件

　　　　　　注：若按下鍵重複產生字符時，在 keyup 事件以前可能產生不少 keypress 事件

　　二、DOM 事件：

　　　　① DOM 即文檔對象模型，它是一種與編程語言及平臺無關的 API ，藉助於它，程序可以動態地訪問和修改文檔內容、結構或顯示樣式

　　　　② W3C 協會早在 1988 年就開始了 DOM 標準的制定，W3C DOM標準能夠分爲 DOM1, DOM2, DOM3 三個版本

　　　　③ DOM1 主要定義的是 HTML 和 XML 文檔的底層結構，

　　　　　 DOM2 和DOM3 則在這個結構的基礎上引入了更多的交互能力，也支持了更高級的XML特性

注：API 是應用程序接口，它以編程語言提供的結構，容許開發人員更容易地建立複雜的功能。

　  它們抽象出更復雜的代碼，並提供一些簡單的語法來使用。簡而言之，API就是一種爲你客戶提供服務的方法

 

　　三、HTML5 事件：

　　　　① HTML5 及相關標準定義了大量新的 Web 應用 API，其中許多 API 都定義了事件，

　　　　　 如：getElementsByClassName() 方法和 querySelectorAll() 方法以及文檔元素的 dataset 屬性

　　　　② 普遍推廣的 HTML5 特性之一是加入用於播放音頻和視頻的 <audio> 和 <video> 元素

　　　　③ HTML5 的拖放 API 容許 JavaScript 應用參加基於操做系統的拖放操做，實現 Web 和原生應用間的數據傳輸

　　　　④ HTML5 爲 HTML 表單定義了大量的新特性，也定義了表單驗證機制

　　　　⑤ HTML5 定義了歷史管理機制，它容許 Web 應用同瀏覽器的返回和前進按鈕交互 

　　　　⑥ HTML5 包含了對離線 Web 應用的支持

　　　　⑦ HTML5 及相關標準定義了一些不在窗口、文檔和文檔元素的對象上觸發的事件

　　　　⑧ HTML5 及相關標準定義了少許龐雜的事件類型

 

　　四、觸摸屏和移動設備事件

　　　　① 強大的移動設備的普遍應用須要創建新的事件類型

　　　　② 手勢事件：用於兩個手指之間的縮放與旋轉；手勢開始時產生 gesturestart 事件，手勢結束產生 gestureend 事件，

　　　　　 在這兩個事件之間是跟蹤手勢過程的 gesturechange 事件隊列；這三個事件對象都有屬性 scale（縮放比例）和 rotation（旋轉角度）

　　　　　 「捏緊」手勢的 scale 值小於 1.0，「撐開」手勢的 scale 值大於 1.0；rotation 指從事件開始手指旋轉的角度，正值表示順時針旋轉

　　　　③ 觸摸事件：當手指觸摸屏幕時，會觸發 touchstart 事件，移動時會觸發 touchmove 事件，手指離開時會觸發 touchend 事件

　　　　　 不像鼠標事件，觸摸事件並不直接報告觸摸的座標。相反，觸摸事件傳遞的事件對象有一個 changedTouches 屬性，

　　　　　 該屬性是一個類數組對象，其每一個元素都描述觸摸的位置

　　　　④ 橫豎屏切換事件：當設備容許用戶從豎屏旋轉到橫屏模式時會在 window 對象上觸發 orientationchange 事件，

　　　　　 window 對象的 orientatation 屬性能給出當前方位，其值是 0，90，180 或 -90