一、前言 繼續上一章的內容，繼續今天的Js學習。 二、內容 事件處理程式 事件對象 事件類型 ...
一、前言
繼續上一章的內容，繼續今天的Js學習。
二、內容
事件處理程式
事件就是用戶或瀏覽器自身執行的某種動作。而響應某個事件的函數就叫做事件處理程式
//HTML事件處理程式
例：
<input type="button" value="Click Me" onclick="try{showMessage();}catch(ex){}">
缺點：
1.時差問題
2.擴展事件處理程式的作用域鏈在不同瀏覽器中會導致不同結果
3.HTML與JavaScript代碼緊密耦合
//JavaScript事件處理程式
addEventListener()指定事件處理程式
removeEventListener()刪除事件處理程式
三個參數：
1.要處理的事件名
2.作為事件處理程式的函數
3.一個布爾值 —— true是在捕獲階段（由外向內）調用；false是在冒泡階段（由內向外）調用,通常使用false！
例：
var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){alert(this.id);},false);
//如何使用removeEventListener()
var btn = document.getElementById("myBtn");
var handler = function(){alert(this.id);};
btn.addEventListener("click",handler,false);
......
btn.removeEventListener("click",handler,false);
事件對象
在觸發DOM上的某個事件時，會產生一個事件對象event，這個對象中包含所有與事件有關的信息。
例：
var btn = document.getElementById("myBtn");
btn.onclick = function(event){alert(event.type)};
//或
btn.addEventListener("click",function(event){alert(event.type);},false);
事件類型
1.UI事件
1.1 load —— 完全載入
1.2 unload —— 完全卸載
1.3 abort —— 停止下載過程中，嵌入的內容沒有載入完
1.4 error —— js錯誤
1.5 select —— 選擇文本框的一個或多個
1.6 resize —— 視窗大小發生變化
1.7 scroll —— 滾動條滾動
2.焦點事件
2.1 blur —— 元素失去焦點（不冒泡）
2.2 focus —— 元素獲得焦點（不冒泡）
2.3 focusin —— 元素獲得焦點（冒泡）
2.4 focusout —— 元素失去焦點
3.滑鼠事件
3.1 click —— 單擊事件
3.2 dbclick —— 雙擊事件
3.3 mousedown —— 按下滑鼠任意按鈕
3.4 mouseenter —— 游標從元素外部首次移動到該元素範圍之內
3.5 mouseleave —— 在元素上方的游標移動到元素範圍之外
3.6 mousemove —— 滑鼠指針在元素內部移動時重覆觸發
3.7 mouseout —— 元素上方滑鼠指針移入另一個元素
3.8 mouseover —— 滑鼠指針位於一個元素外部，用戶首次移入另一個元素
3.9 mouseup —— 釋放滑鼠按鈕
4.滾輪事件
4.1 mousewheel —— 滑鼠滾輪事件
5.文本事件
5.1 textInput —— 用戶在可編輯區域中輸入字元觸發，用意是將文本顯示給用戶之前更容易攔截文本
6.鍵盤事件
6.1 keydown —— 按下任意鍵，按住不放會重覆觸發
6.2 keypress —— 按下字元鍵，按住不放會重覆觸發
6.3 keyup —— 釋放鍵盤鍵
7.合成事件
8.變動事件
9.HTML5事件
9.1 contextmenu —— 通過單擊滑鼠右鍵可以調出上下文菜單
9.2 beforeunload —— 在瀏覽器卸載頁面之前觸發，可以通過它來取消卸載並繼續使用原有頁面
9.3 DOMContentLoaded —— 形成完整的DOM樹之後就會觸發，不理會css,js資源是否下載完畢，用戶可以儘早與頁面交互
9.4 pageshow 與 pagehide —— 該事件處理程式必須要添加到window對象
9.5 hashchangde —— 在URL參數列表（#後的所有字元串）發送變化時通知，必須要添加到window對
