事件流

1 事件冒泡：即事件開始時由具體的元素接受，然後逐級向上傳播到較為不具體的節點，主流瀏覽器將一直冒泡到window物件上。
2 事件捕獲：不太具體的節點更早接收到事件，而最具體的節點最後接收到事件，用意在事件達到預定目標之前捕獲它。
3 DOM事件流：包括三個階段，事件捕獲階段，處於目標階段和事件冒泡階段。

事件處理程式

1 DOM0級事件處理程式：

• 每個元素都有自己的事件處理程式屬性，這些屬性通常全部小寫。
• 使用DOM0級方法指定的事件處理程式被認為是元素的方法，因此這時候的事件處理程式是在元素的作用域中執行的，換句話說，程式中的this引用當前元素。
• 實際上，可以在事件的處理程式中通過this訪問元素的任何屬性和方法。
• 以這種方式新增的事件處理程式會在事件流的冒泡階段被處理。
• 刪除事件的方法：btn.onclick=null;
  2 DOM2級事件處理程式
• 定義了兩個方法，用於處理指定和刪除事件處理程式的操作：addEventListener(), removeEventListener(),所有dom節點都包括這兩個方法，並且都接受三個引數，要處理的事件名，作為事件處理程式的函式和一個布林值。若布林值的引數為true，表示在捕獲階段。如果是false，表示冒泡階段呼叫事件處理程式。
• 通過addEventListener新增的事件處理處理程式只能通過removeEventLIstener移除，移除的引數與新增程式相同，這也以為這通過addEventListener新增的匿名函式將無法移除。
• 這種新增事件處理程式的好處是可以新增多個事件處理程式。

3 IE事件處理程式
attachEvent
4 跨瀏覽器的事件處理程式

var EventUtil={
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent("on"
 
+type,handler)
        }else{
            element['on'+type]=handler;
        }
    },
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,handler)
        }else{
            element['on'+type]=null;
        }
    }
}

事件物件

在觸發dom上事件時，會產生一個事件物件event，這個物件中包含這所有與事件有關的資訊。
1 DOM中的事件物件
event的屬性的方法如下：

• bubbles:表明事件是否冒泡
• cancelable:表明是否可以取消事件的預設行為
• currentTarget:其事件處理程式當前正在處理事件的哪個元素
• defaultPrevented:為true表示已經呼叫了preventDefault()
• detail
• eventPhase
• preventDefault():取消事件的預設行為
• stopImmediatePropagation():取消事件的進一步捕獲或者冒泡
• stopPropagation():取消事件的進一步捕獲或冒泡
• target：事件的目標
• trusted
• type

• view

  在事件處理程式內部，物件this始終等於currentTarget,而target的值只包含事件的實際目標。如果直接將事件處理程式指定給了目標元素，則this,currentTarget和target包含相同的值。如果事件處理程式存在於按鈕的父節點，那麼這些值是不相同的。（target值不同）

在需要通過一個函式處理多個事件時，可以使用type屬性
event.type

事件物件的eventPhase屬性，可以用來確定事件當前正位於事件流的哪個階段。如果是在捕獲階段呼叫，則為1；如果在事件處理程式處於目標物件上，則等於2，如果是冒泡階段，則返回3

事件處理程式完成，event物件會自動銷燬

事件型別

如果在頁面載入前操作document.body會導致錯誤
1 unload事件：
這個事件是在文件被完全解除安裝後觸發，只要使用者從一個介面切換到另一個介面，就會發生unload事件，而利用這一事件最多的就是清除引用，以免記憶體洩露。要小心的是，既然unload事件在一切都被解除安裝後觸發，那麼在頁面載入後存在的那些物件，就不一定存在了。
2.焦點事件：會在頁面元素獲得或者失去焦點時觸發，利用document.hasFocus()方法及document.activeElement屬性配合。有以下六個焦點事件

• blur:失去焦點時觸發，這個事件不會冒泡
• focus:元素獲得焦點時觸發，這個事件不會冒泡

3 滑鼠點選事件
click
客戶區座標位置：滑鼠事件都是在瀏覽器視口中的特定位置上發生的，位置資訊儲存在clientX和clientY中。當用戶點選這個元素時，就會看到事件的客戶端座標資訊。

頁面座標位置：視口位置：pageX和pageY,這兩個的值在頁面不滾動時，與clientX和clientY相等。在ie8之前，使用event. clientX
+ document. documentElement. scrollLeft和event. clientY+document.documentElement. scrollTop

螢幕座標位置：相對於整個電腦螢幕的位置，通過screenX和screenY屬性可以確定滑鼠事件發生時滑鼠指標相對於整個螢幕的座標資訊。

表單

1 提交表單：
使用input或者button都可以定義提交按鈕，只需將type設定成submit。以這種方式提交表單，瀏覽器會在請求傳送給伺服器之前觸發submit，這樣我們就有機會驗證表單資料，並決定是否允許表單提交。阻止這個事件的預設行為就可以取消表單的提交。
在js中，以程式設計的方式，呼叫submit()方式提交表單，不會觸發submit事件，因此要記得呼叫此方法前要先驗證表單資料。
提交表單可能出現的最大的問題，就是重複提交表單，解決這一問題的辦法有兩個，在第一次提交表單後就禁用提交按鈕，或者利用onsubmit事件處理程式取消後續的表單提交操作。
以下程式碼通過第一次單擊後禁用提交按鈕，來防止重複提交表單：

EventUtils.addHandler(form,"submit",function(event){
    event=EventUtil.getTarget(event);
    var target=EventUtil.getTarget(event);
    var btn=target.elements["submit-btn"];
    btn.disabled=true;
})

2 重置表單：
使用type為reset的input或者button
在js中，以程式設計方式，呼叫reset(),會立即觸發reset事件。

3 表單欄位

elements屬性：是表單中所有元素的集合，它們在集合中的順序，與它們在標記中的順序相同，可以按照位置和name特性來訪問它們。
共有的表單欄位屬性：

• disabled:表示當前欄位是否被禁用
• form：指向當前欄位所屬表單的指標。
• name:當前欄位的名稱
• readOnly
• tabIndex
• type
• value:當前欄位將被提交給伺服器的值，對檔案欄位來說，這個屬性是隻讀的，包含著檔案在計算機中的路徑。

除了form屬性外，可以通過js動態修改其他任何屬性

type的屬性值如下：

• select-one:單選列表
• select-multiple:多選列表
• submit：自定義提交按鈕
• button
• reset

共有的表單欄位方法：
每個表單欄位有兩個方法：focus()和blur().其中focus方法用於將瀏覽器的焦點設定到表單欄位，即啟用表單欄位，使其可以響應鍵盤事件。如果呼叫focus的欄位是不可見的，就會發生錯誤。
html5為表單設定了autofocus屬性，js會自動把焦點移到響應欄位上。
blur():作用是從元素中移走。

共有的表單欄位事件：

• blur
• change:對於input和textarea元素，在它們失去焦點且value值改變時觸發。對於select元素，在其選項改變時觸發。
• focus
  通常，focus和blur事件以某種方式改變使用者介面，要麼是向用戶給出視覺提示，要麼是向介面中新增額外的功能。而change事件經常用於驗證使用者在欄位中輸入的資料。

文字框指令碼：
有兩種方式表現文字框：一種使用input元素的單行文字框，另一種是使用textarea的多行文字框，這兩個空間的區別是：textarea可以使用rows和cols特性。input: type:text; size; value; maxlength

無論這兩種文字框在標記中有什麼區別，他們都會將使用者輸入的內容儲存在value屬性中，可以通過這個屬性讀取和設定文字框的值.

在處理文字框的值時，最好不使用dom方法。

4 選擇文字：

• 選擇事件：select():上述兩種文字框用於選擇文字框中的所有文字。在呼叫select()方法時，會將焦點設定到文字框。
• 取得選擇的指令碼屬性：selectionStart和selectionEnd,這兩個屬性中儲存的是基於0的值，表示所選擇的文字的範圍。
• 選擇部分文字：setSelectionRange()方法，接受兩個引數，要選擇的第一個字元的索引和要選擇的最後一個字元之後的字元的索引。

5 過濾輸入
遮蔽字元
操作剪貼簿
自動切換焦點

6html5約束驗證api

• 必填欄位：require
• 其他輸入欄位：為input的type屬性又增加了幾個值，type=”email”和type=”url”。要注意的是，如果不給input元素設定require屬性，那麼空文字框也會驗證通過。另一方面，設定特定的輸入型別不能阻止使用者輸入無效的值，只是應用某些預設的驗證。
• 輸入模式：pattern：正則表示式 eg:

<input type="text" pattern="\d+" name="count">

注意，模式的開頭和末尾無需加上^ 和$,pattern也不能阻止使用者輸入無效的文字。

• 檢測有效性：checkValidity()方法可以檢測表單中的欄位是否有效，所有表單欄位都有這個方法，如果有效，則返回true，否則返回false，欄位的值是否有效的判斷依據是本節前面介紹過的那些約束。

document.forms[0].elements[0].checkValidity()

• validity則會告訴你什麼欄位有效或無效。屬性包括：
  customError:
  patternMismatch:與指定的pattern不匹配，返回true
  valid：如果這裡的其他屬性都為false，則該值為true。
  valueMissing:如果標註為required的欄位沒有值，則為true
  typeMismatch:如果不是mail或者url要求的格式，則返回true
• 禁用驗證
  通過設定novalidate屬性，可以告訴表單不進行驗證。

<form method="post" action="" novalidate></form>

如果一個表單有多個提交按鈕，為了指定點選某個提交按鈕而不必驗證表單，可以在相應按鈕上新增formnovalidate屬性。

7 選擇框指令碼

選擇框是通過select和option元素建立的，為了方便與這個控制元件互動，除了所有表單欄位共有的屬性和方法外，htmlselectelement型別還提供瞭如下的屬性和方法。

• add(new,rel):向控制元件中插入新option元素，其位置在rel之前
• remove(index):移除給定位置的選項。
• multiple
• options
• selectIndex:基於0的選中項的索引。
• size:選擇框中可見的行數

在dom中，每個option元素都有下列屬性：

• label
• selected
• text
• value
• index
  注意：選擇框的change事件與其他表單欄位的change事件觸發的條件不一樣，其他表單欄位的change事件是在值被修改且焦點離開當前欄位時觸發，而選擇框的change事件只要選中的選項就會觸發。

8 選擇選項
對於只允許選擇一項的選擇框，就是使用selectedIndex屬性，如下面的例子

var selectOption=selectbox.options[selectbox.selectedIndex]
selectOption.text
selectOption.value

另一種選擇選項的方式，就是取得對某一項的引用，然後將其selected屬性設定為true。

selectbox.options[0].selected = true;

在允許多選的選擇框中設定選項的selected屬性，不會取消對其他選中項的選擇。需要注意的是，將selected屬性設定為false對單選框沒有影響。

實際上，selected屬性的作用主要是確定使用者選擇了選擇框中的哪一項，要取得多選中的項，可以迴圈遍歷選項集合，然後測試每個選項的selected屬性。

9 新增選項
使用option建構函式來建立新選項，這個建構函式是dom出現之前就有的，option建構函式接受兩個引數，文字和值。第二個引數可選。
add方法，接受兩個引數，要新增的項和位於新選項之後的項，如果想再列表的最後新增項，則將第二個引數設定為null。

var newoption=new Option('text','value')
selectbox.add(newoption,undefined)//為了相容瀏覽器，必須傳入第二個引數，對第二個引數傳入undefined,就可以在所有瀏覽器中都將新選項插入到列表最後。

10 移除選項
selectbox.remove(0);
selectbox.options[0]=null
要清除選擇框中的所有項，需要迭代所有項並逐個移除它們

function clearSelectbox(selectbox){
    for(var i=0,len=selectbox.options.length;i<len;i++){
        selectbox.remove(i);//？
    }
}

11 移動和重排選項
移動選項和移除選項都有一個共同之處，即會重置每一個選項的index屬性。
移動選項：(append)

var selectbox1=document.getElementById("selections1")
var selectbox2=document.getElementById("selections2")
selectbox2.appendChild(selectbox1.options[0])

重排選項次序的過程也十分類似(insertbefore)

var optionToMove=selectbox.options[1];
selectbox.insertbefore(optionToMove,selectbox.options[optionToMove.index-1])//將其插入到了它前面的元素之前
selectbox.insertbefore(optionToMove,selectbox.options[optionToMove.index+2])//將其向後移動了一個位置