首先，我是一隻菜雞，所寫的內容都是建立在自己的理解基礎之上，若有什麼不對的地方，歡迎指正。 1.事件處理函數 事件是指自動觸發的或用戶手動觸發的對象狀態的改變。 事件處理函數：當事件觸發時，自動執行的函數 事件處理函數的本質上是對象的一個特殊屬性，而該屬性指向了一個函數。 每個元素對象都能觸發各種事 ...
首先，我是一隻菜雞，所寫的內容都是建立在自己的理解基礎之上，若有什麼不對的地方，歡迎指正。
1.事件處理函數
事件是指自動觸發的或用戶手動觸發的對象狀態的改變。
事件處理函數：當事件觸發時，自動執行的函數
事件處理函數的本質上是對象的一個特殊屬性，而該屬性指向了一個函數。
每個元素對象都能觸發各種事件，而每個事件都對應一個事件處理函數。
當沒有綁定事件處理函數時，依然可以觸發事件，但是由於此時的事件綁定函數為空，所以不會執行任何操作。
在程式執行時，將相應的函數或語句綁定給對象的某個事件處理函數，那麼一旦該對象的指定事件觸發，瀏覽器變回自動執行該對象的事件處理函數中的操作。
綁定事件處理函數 = 為on事件名(此函數)賦值
2.基本事件分類
1.滑鼠事件
onclick onbdclick onmousedown onmouseup onmouseover（進入邊界時觸發一次） onmouseout onmusemove
2.鍵盤事件
onkeydown onkeyup onkeypress
3.狀態事件
onload onunload onchange（select） onfocus（表單） onblur（表單） onresize onsubmit onreset onerror
3.關於事件定義
為特定的時間定義監聽函數有三種方式：
1.直接在HTML中定義元素的事件的相關屬性
<標簽 on事件名="fun()/js語句">按鈕</標簽
<標簽 class="d1" onclick="fun()"> 相當於 d1.onclick=function(){ console.log(this.className); //d1 eval("fun()");//[window.]fun }
結論：fun()中this指向window
//若要獲得當前目標元素對象
html:
onxxx="fun(this)"
js中定義函數時:
fun(elem);
這種方式違背了“內容和行為相互分離”的原則，應該儘量少用。
2.在JavaScript中為元素的事件相關屬性賦值：
elem.on事件名=函數對象;
這種方式實現了“內容與行為相分離”，但是元素只能綁定一個監聽函數。
3.高級事件處理方式，一個事件能夠綁定多個監聽函數：
DOM標準：elem.addEventListener(“事件名”,事件對象，是否在捕獲階段觸發)
IE8標準：elem.attachEvent("on事件名",事件對象)
btnObj.attachEvent('onclick',function(){}); //IE
btnObj.addEventListener('click',function(){}); //DOM
...
doucument.body.attachEvent('onload',initData); //IE
document.body.addEventListener('load',initData); //DOM
function(){
...
}
這種方式能夠為一個元素綁定多個監聽函數，但是需要註意瀏覽器相容性問題。
小例子：逆向執行事件處理函數
html：
css：
js：
結果：
原始
點擊最內層方塊結果：
3.事件周期
DOM
解釋器創建了一個event對象之後，會按照如下過程將其在HTML元素間進行傳播：
第一階段：事件捕獲，事件對象沿著DOM樹向下傳播（IE中的事件模型中沒有此階段）
第二階段：目標觸發，運行事件監聽函數
第三階段：事件冒泡，事件沿著DOM樹向上傳播
1.事件的冒泡處理機制：
當處於DHTML對象模型底部對象事件發生時會依次激活上面對象定義的同類事件的處理
結果：
IE
只有兩個階段，沒有捕獲
4.event對象
任何事件觸發之後都會產生一個event對象
當事件發生時，自動創建，封裝了事件信息（keyCode/screenX/screenY...）
event對象記錄事件發生時的滑鼠位置，鍵盤按鍵狀態和觸發對象等信息，事件對象的常用屬性：
- secElement（IE） / target（DOM） : 事件源對象
- eventPhase : 事件傳播的階段
- clientX/offsetX/pageX/screenX/x : 事件發生時的X坐標
- clientY/offsetY/pageY/screenY/y : 事件發生時的Y坐標
- which/keyCode/charCode : 鍵盤事件中按下的按鍵
- button ： 滑鼠哪個按鍵被按下
- cancelBubble : 是否取消事件冒泡
- returnValue : 是否阻止事件的預設行為
1.目標元素對象(從一而終)
1.HTML綁定事件方式
html:
onclick="fun(event)" //event必須這樣寫，不能變
//實際調用時，event會自動獲得當前事件的對象
js:
fun(e){
//e中獲取到的就是當前的事件對象
}
2.js綁定方式
//DOM標準：自動創建event對象，預設以第一個參數傳入自定義的事件處理函數對象
//IE標準：window全局的event屬性，當事件發生時，自動創建event對象，保存在window.event中
var e=window.event||arguments[0];
var src=e.srcElement||e.target;
5.取消冒泡和利用冒泡
1.取消冒泡
DOM標準：e.stopPropagation()
IE標準：e.cancelBubble=true;
用在當前的事件處理函數的末尾
if(e.stopPropagation)
{
e.stopPropagation();
}else{
e.cancelBubble=true;
}
2.利用冒泡
優化：若多個子元素中定義了相同的事件處理函數，只需要在共同的父元素上定義一次即可
原理：事件的捕獲和冒泡不會受到程式的干擾，當觸發子元素時，會捕獲到該元素，然後在父元素觸發事件。
6.取消事件
if(e.preventDefault){
e.preventDefault(); //DOM
}else{
e.returnValue=false; //IE
}
何時取消：eg：表單提交之前，若驗證未通過，就取消之後的自動提交。
