JavaScript與HTML之間的交互是通過事件實現的。事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。
1、事件流：描述的是從頁面中接收事件的順序。
IE提出的事件冒泡流：事件開始由最具體的元素接收，然後向上傳播到較爲不具體的節點。
Nerscape提出的事件捕獲流：由最不具體的元素逐漸傳播到最具體的節點。
DOM2級事件規定了事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段。首先發生的是事件捕獲，爲截獲事件提供了機會。然後實際的目標接收到事件。最後一個階段是冒泡階段，可以在這個階段對事件做出響應。
2、事件處理程序：響應事件的函數。名字一般以“on”開頭，如onclick、onload、onmouseover... 添加事件處理程序有3種方法：HTML事件處理程序、DOM0級事件處理程序、DOM2級事件處理程序.
HTML事件處理程序：某個元素支持某種事件，都可以使用一個與相應事件處理程序同名的HTML特性來指定。
例如： <input type = "button" value = "Click" onclick = "alert('Click')" /> ,由於這個值是JavaScript，因此不能在其中使用未轉義的HTML語法字符，例如&、“”、<、>。若要使用引號，可以這麼來用： <input type = "button" value = "Click" onclick = "alert("Click")" />
DOM0級事件處理程序：將一個函數賦值給一個事件處理程序。例如：
1 var btn = document.getElementById("myBtn");2 btn.onclick = function(){3 alert("Click");4 };同時，也可以刪除DOM0級方法指定的事件處理程序，只要設置爲null即可： btn.onclick = null; //刪除DOM0級事件處理程序
DOM2級事件處理程序：“DOM2級事件”定義了倆個 方法，用於處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()，接收3個參數：要處理的事件名、作爲事件處理程序的函數和一個布爾值，布爾值如果爲true，表示在捕獲階段調用事件處理函數；如果是false(默認)，在冒泡階段調用。同時，IE有自己“獨特”的事件處理程序去替代這倆個方法：attachEvent()和detachEvent().這樣一來，我們就得苦逼的想着如何兼容倆者了，常用的做法如下：
1 var eventUtil={ //type事件不加on！ 2 //添加句柄 3 addHandle:function (element,type,handler){ 4 if(element.addEventListener){ 5 element.addEventListener(type,handler,false); 6 }else if(element.attachEvent){ 7 element.attachEvent("on"+type,handler); 8 }else{ 9 element["on"+type].handler;10 }11 }12 //刪除句柄---匿名函數不能被移除13 removeHandle:function (element,type,handler){14 if(element.removeEventListener){15 element.removeEventListener(type,handler,false);16 }else if(element.detachEvent){17 element.detachEvent("on"+type,handler);18 }else{19 element["on"+type]=null;20 }
21 }22 }
23 24 eventUtil.addHandle(oBtn,'click',show); //調用方法
3、事件對象：在觸發DOM上的某個事件時，會產生一個事件對象event，這個對象包含着所有與事件有關的信息。包括導致事件的元素、事件的類型以及其他與特定事件相關的信息。
事件對象的獲取和屬性方面，IE有顯得那麼“特殊”。因此，我們處處要想着兼容它。有關事件對象和對象屬性，常用的兼容方法如下：
1 var eventUtil={
2 //獲取事件對象 3 getEvent : function (event){ 4 return event ? event : window.event; 5 } 6 //獲取事件目標 7 getElement : function(event){ //傳入獲取到的事件對象 8 return event.target || event.srcElement; 9 }10 //阻止事件冒泡11 stopPropagation:function(event){ //傳入獲取到的事件對象 12 if(event.stopPropagation){13 event.stopPropagation;14 }else{15 event.cancelBubble=true;16 }17 }18 //阻止默認行爲19 preventDefault:function(event){ //傳入獲取到的事件對象 20 if(event.preventDefault){21 event.preventDefault;22 }else{23 event.returnValue=false;24 }
25 }26 }
具體用法：
use
4、事件類型：Web瀏覽器中可能發生的事情有很多類型，不同的事件類型具有不同的信息。 “DOM3級事件”規定了以下幾類屬性：
UI（User Interface，用戶界面）事件，當用戶與頁面上的元素交互時觸發；
焦點事件，當元素獲取或失去焦點時觸發；
鼠標事件，當用戶通過鼠標在頁面上執行操作時觸發；
滾輪事件，當使用滾輪（或類似設備）時觸發；
文本事件，當在文檔中輸入文本時觸發；
鍵盤事件，當用戶通過鍵盤在頁面上執行操作時觸發；
合成事件，當爲IME（Input Method Editor，輸入法編輯器）輸入字符時觸發；
變動（mutation）事件，當底層DOM結構發生變化時觸發；
變動名稱事件，當元素或屬性名變動時觸發。此類事件已被廢棄。
4.1 UI事件：指的是那些不一定與用戶操作有關的事件。這些事件在DOM規範出現之前，都是以這種形式存在的，現有的UI事件如下：
load：當頁面完全加載後再window上觸發。
unload：當頁面完全卸載後再window上觸發。
error：當發生JavaScript錯誤時在window上面觸發。
select：當用戶選擇文本框（<input>或<textarea>）中的一或多個字符時觸發。即複製開始時觸發。
resize：當窗口或框架的大小變化在window或框架上觸發。
scroll：但用戶滾動條的元素中內容時，在該元素上面觸發。<body>元素中包含所加載頁面的滾動條。
4.2 焦點事件：焦點事件會在頁面元素獲得或失去焦點時觸發。
blur：在元素失去焦點時觸發。這個事件不會冒泡；所有瀏覽器都支持它。
focus：在元素獲得時觸發。這個事件不會冒泡；所有瀏覽器都支持它。
focusout：與blur等價。
focusin：與focus等價，但它冒泡。
DOMFocusIn：在元素獲得焦點時觸發。這個事件和focus等價，但它冒泡。只有Opera支持，且在DOM3級事件廢除了，選擇了focusin。
DOMFocusOut：在元素失去焦點時觸發。這個事件是blur的通用版本。只有Opera支持。DOM3級事件廢除了，選擇了focusout。
4.3 鼠標與滾輪事件
click：在用戶單擊主鼠標按鈕或按下回車鍵時觸發。
dblclick：在用戶雙擊主鼠標時觸發。
mousedown：在用戶按下了任意鼠標按鈕時觸發。不能通過鍵盤觸發這個事件。
mouseup：在用戶釋放鼠標按鈕時觸發。不能通過鍵盤觸發這個事件。
mouseout：在鼠標指針位於一個元素上方，然後用戶將其移入另一個元素時觸發。又移入的另一個元素可能位於前一個元素的外部，也可能是這個元素的子元素。不能通過鍵盤事件觸發。
mouseover：在鼠標指針位於一個元素外部，然後用戶將其首次移入另一個元素邊界之內時觸發。不能通過鍵盤事件觸發這個事件。
mouseenter：在鼠標光標從元素外部首次移動到元素範圍之內觸發。這個事件不冒泡，而且在光標移動到後代元素上不會觸發。DOM3級納入規範。IE、Firefox 9+和Opera支持。
mouseleave：在位於元素上方的光標移動到元素範圍之外時觸發。這個事件不冒泡，而且在光標移動到後代元素上不會觸發。DOM3級納入規範。IE、Firefox 9+和Opera支持。
4.3.1 客戶區座標位置
1 var div = document.getElementById("myDiv");2 EventUtil.addHandler(div, "click", function(event){3 event = EventUtil.getEvent(event); //獲取事件對象4 alert("Client coordinates : " + event.clientX + "," +event,clientY); //相對於瀏覽器窗口位置5 });
4.3.2 頁面座標位置
1 var div = document.getElementById("myDiv");2 EventUtil.addHandler(div, "click", function(event){3 event = EventUtil.getEvent(event);4 alert("Page coordation: "+event.pageX + "," + event.pageY);//相對文檔座標5 }IE8之前不支持，因此要用clientX/Y 和 滾動信息計算出來。這個時候需要document.body(混雜模式)或documentElement(標準模式)中的scrollLeft和scrollTop屬性。計算過程如下：
View Code
4.3.3 屏幕座標位置
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
alert("Screen coordation: "+event.screenX + "," + event.screenY);//相對電腦屏幕座標}
4.3.4 修改鍵
雖熱鼠標事件主要是使用鼠標來觸發的，但在按下鼠標時鍵盤上的某些鍵的狀態也是可以影響到所要採取的操作。這些修改鍵就是Shift、Ctrl、Alt和Meta（在window鍵盤中的Window鍵，在蘋果機中的Cmd鍵），它們經常被用來修改鼠標事件的行爲。DOM爲此規定了4個屬性，表示這些修改鍵的狀態：shiftKey、ctrlKey、altKey和metaKey。這些屬性包含的都是布爾值，如果相應的鍵被按下，則值爲true，否則爲false。當某個鼠標事件發生時，通過檢測這幾個屬性就可以確定用戶是否按下了其中的鍵。下面來舉個例子：
View Code
4.3.5 鼠標滾輪事件
觸發鼠標滾輪事件後，生成的事件對象有一個屬性叫：wheelDelta，它是一個數值。在不同的瀏覽器不同的滾動方向有不同的數值，因此，我們還要去兼容它。
1 var eventUtil ={ 2 //獲取鼠標滾輪屬性值 3 getWheelDelta:function(event) { 4 if(event.wheelDelta) { 5 return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDalta); //針對Opera瀏覽器 6 }else{ 7 return -event.detail * 40; 8 } 9 }10 }
具體用法：
View Code
4.4 鍵盤和文本事件：用戶在使用鍵盤時會觸發鍵盤事件。
有3個鍵盤事件，簡述如下：
keydown：當用戶按下鍵盤上的任意鍵時觸發，而且如果按住不放的話，會重複觸發此事件。
keypress：當用戶按下鍵盤上的字符鍵時觸發，而且如果按住不放的話，會重複觸發此事件。
keyup：當用戶釋放鍵盤上的鍵時觸發。
只有一個文本事件：textInput。這個事件是對keypress的補充，用意是將文本顯示給用戶之前更容易攔截文本。在文本插入文本框之前會觸發textInput事件。
在用戶按了一個字符鍵時，首先觸發keydown事件，然後緊跟着是keypress事件，最後觸發keyup事件。其中，keydown和keypress都是在文本框發生變化之前被觸發；而keyup事件則是在文本框已經發生變化之後被觸發。
4.4.1 鍵碼
在發生keydown和keyup事件時，event對象的keyCode屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應。對數字字母字符鍵，keyCode屬性的值與ASCII碼中對應小寫字母的編碼相同——與Shift狀態無關。DOM和IE的event對象都支持keyCode屬性。
keyCode用法
4.4.2 字符編碼
發生keypress事件意味着按下的鍵會影響到屏幕中文本的顯示。在所有瀏覽器中，按下能夠插入或刪除字符的鍵都會觸發keypress事件；按下其他鍵能否觸發此事件因瀏覽器而異。IE9+、Firefox、Chrome和Safiri的event對象都支持一個charCode屬性，這個屬性只有發生在keypress事件時才包含值，而且這個值是按下的那個鍵所代表字符的ASCII編碼。此時keyCode通常等於0或者也等於所按鍵的鍵碼。IE8及之前版本和Opera則是在keyCode中保存字符的ASCII編碼。想要以跨瀏覽器的方式取得字符編碼，必須首先檢測charCode屬性是否可用，如果不可用則使用keyCode，如下：
1 var eventUtil = {2 //省略其他代碼3 getCharCode: function(event) {4 if(typeof event.charCode == "number"){ //判斷是否支持charCode屬性5 return event.charCode;6 }else{7 return event.keyCode;8 }，9 }；