1. Mouse Event
    1. 透過event.type來取得的事件名稱沒有on開頭
    2. onmousedown
      1. 按下mouse按鍵，不論左右鍵
    3. onmousemove
      1. 移動mouse
    4. onmouseout
      1. mouse指標離開HTML標籤
    5. onmouseover
      1. mouse指標進入HTML標籤
    6. onmouseup
      1. 放開mouse按鍵
    7. onclick
      1. 按一下mouse左鍵
    8. ondblclick
      1. 按二下mouse左鍵
    9. 按一下Mouse
      1. mousedown --> mouseup --> click
    10. 隱藏Mouse右鍵選單
      1. Mouse右鍵會觸發一個contextmenu事件
      2. function blockMenu(Evt){ if(window.event){ Evt = window.event; Evt.returnValue = false;//取消IE預設事件 }else Evt.preventDefault();//取消DOM預設事件 } document.oncontextmenu = blockMenu;
  2. Keyboard Event
    1. 透過event.type來取得的事件名稱沒有on開頭
    2. onkeydown
      1. 按下鍵盤按鍵
    3. onkeypress
      1. 在keydown與keyup之間的事件，或是按著不放時所觸發
    4. onkeyup
      1. 放開鍵盤按鍵
  3. HTML Event
    1. 透過event.type來取得的事件名稱沒有on開頭
    2. onload
      1. 頁面完全載入後在window物件上觸發，圖片載入完成後在其上觸發
    3. onunload
      1. 頁面完全卸載後在window物件上觸發，圖片卸載完成後在其上觸發
    4. onabort
      1. 放棄圖片載入
    5. onblur
      1. 離開擁有處理權的物件
    6. onchange
      1. 在取得處理權後，更改過文字方塊的內容，離開文字方塊時觸發
    7. onerror
      1. 腳本出錯時在window物件上觸發，圖片無法載入時在其上觸發
    8. onfocus
      1. 指定物件擁有處理權
    9. onreset
      1. 重設表單
    10. onselect
      1. 選擇網頁內容
    11. onsubmit
      1. 送出表單
  4. 事件監聽
    1. 頁面中的事件都需要一個函數來回應，這類函數通常稱為「事件處理函數(event handler)」， 另一方面，這些函數都在即時監聽著是否有事件發生，所以也稱「事件監聽函數(event listener)
    2. 將事件當成HTML標籤屬性
      1. <input type="button" value="訊息" onclick="showInfo()" />
    3. 將事件當成Javascript的屬性
      1. document.form1.mybutton.onclick = "showInfo";
      2. 除了要傳遞參數，否則處理函數不用()符號。
    4. 事件是由Window或document等上層物件所觸發，只需設定物件的事件屬性
      1. document.onclick = "showInfo";
    5. 考慮結構與行為分離
      1. 匿名函數
        1. window.onload=function(){ var getP=document.getElementById("myP"); getP.onclick=function(){ alert("click"); } }
    6. IE事件監聽
      1. 在IE中，每個元素都有兩個方法來處理事件的監聽
        1. [Object].attachEvent("event handler",fnHandler);
          1. 新增監聽函數
        2. [Object].detachEvent("event handler",fnHandler);
          1. 刪除監聽函數
        3. event handler為事件的名稱，如onclick，onload…； fnHandler為監聽函數名稱，這個函數不需加上括弧的執行結果
        4. getP.attachEvent("onclick",fnClick1); getP.attachEvent("onclick",fnClick2);
          1. 在IE7/8中，兩個函數的呼叫順序是fnClick2-->fnClick1，但兩者都會被執行。 例如，我們在fnClick2最後加上detachEvent來解除fnClick1，但fnClick1還是會被執行； 但如果Click第二次，因為fnClick1已經被detachEvent解除，所以只會執行fnClick2。
      2. IE不會執行標準DOM的addEventListener/removeEventListener方法
    7. 標準DOM事件監聽
      1. [Object].addEventListener("event name",fnHandler, bCapture);
        1. 新增監聽函數
      2. [Object].removeEventListener("event name",fnHandler, bCapture);
        1. 刪除監聽函數
      3. event name是click、mousemove…沒有on(注意，和IE不一樣)，bCapture：false為冒泡
      4. getP.addEventListener("click",fnClick1,false); getP.addEventListener("click",fnClick2,false);
        1. DOM的執行順序為fnClick1-->fnClick2，而且是fnClick1執行完成後才會從行fnClick2。 所以如果我們在fnClick1中最後加上removeEventListener來解除fnClick2，那fnClick2就不會執行。
  5. 事件物件
    1. 在瀏覽器中的事件都是以「物件」的型式存在，但IE與標準DOM瀏覽器之間在取事件物件上有差別。
    2. IE
      1. 事件物件是window物件的一個屬性event
        1. getP.onclick = function(){ //取得事件物件 var evt = window.event; }
    3. DOM瀏覽器
      1. 事件物件須使用唯一參數傳給事件管理函數
        1. getP.onclick = function(evt){ }
    4. 相容性新增事件監聽
      1. function (evt) { //透過測試window.event來判斷是否是IE來決定事件物件的建立 if (window.event) evt = window.event; ... }
  6. 取消事件
    1. 事件 --> 自訂事件處理 --> Browser預設事件處理
    2. 取消事件處理函數，只需設成null
      1. document.onclick = null;
      2. document.form1.mybutton.onclick = null;
    3. 在自訂事件處理函數取消事件
      1. return false;
      2. 只需傳回false即可
  7. 氣泡事件(Bubble Event)
    1. <body>
      1. <form>
        1. <input type="text" />
        2. <input type="radio" />
        3. <input type="button" />
    2. 上面的架構圖，每一個tag都擁有onclick事件，如果在最下層的按鈕button觸發了onclick事件， 事件不只在此tag觸發，還會向上傳遞，接著form觸發onclick事件，再來是body也一樣會觸發onclick事件。
  8. 事件屬性和方法
    1. 事件屬性和方法
      1. altKey
        1. altKey
        2. Boolean
        3. R/W
        4. 按下Alt鍵則為true
      2. butoon
        1. button
        2. Integer
        3. R/W
        4. 滑鼠事件，值對應按下的滑鼠鍵
      3. cancelBubble
        1. cancelBubble
        2. Boolean
        3. IE：R/W，DOM：R
        4. IE設置為true可取消氣泡事件
      4. --
        1. stopPropagation()
        2. Function
        3. N/A
        4. DOM使用此方法來取消氣泡事件
      5. clientX
        1. clientX
        2. Integer
        3. IE：R/W，DOM：R
        4. 滑鼠指標在「用戶端區域」的X座標
      6. clientY
        1. clientY
        2. Integer
        3. IE：R/W，DOM：R
        4. 滑鼠指標在「用戶端區域」的Y座標
      7. ctrlKey
        1. ctrlKey
        2. Boolean
        3. IE：R/W，DOM：R
        4. 按下Ctrl鍵則為true
      8. fromElement
        1. relatedTarget
        2. Element
        3. IE：R/W，DOM：R
        4. 滑鼠指標所離開的元素
      9. toElement
        1. currentTarget
        2. Element
        3. IE：R/W，DOM：R
        4. 滑鼠指標正在進入的元素
      10. --
        1. charCode
        2. Integer
        3. R
        4. 按下按鍵的Unicode值
      11. keyCode
        1. keyCode
        2. Integer
        3. R/W
        4. IE中keypress事件按下按鍵的Unicode值， keydown/keyup事件為按鍵的數位代號。 DOM中keypress時為0，其餘為按下按鍵的數位代號。
      12. --
        1. detail
        2. Integer
        3. R
        4. 滑鼠按鍵被按一下的次數
      13. returnValue
        1. --
        2. Boolean
        3. R/W
        4. 設置為false時可取消事件的預設行為
      14. --
        1. preventDefault()
        2. Function
        3. N/A
        4. DOM使用該方法來阻止事件的預設行為
      15. screenX
        1. screenX
        2. Integer
        3. IE：R/W，DOM：R
        4. 滑鼠指標相對於「整個電腦螢幕」的X座標值
      16. screenY
        1. screenY
        2. Integer
        3. IE：R/W，DOM：R
        4. 滑鼠指標相對於「整個電腦螢幕」的Y座標值
      17. shiftKey
        1. shiftKey
        2. Boolean
        3. IE：R/W，DOM：R
        4. 按下Shift鍵則為true
      18. srcElement
        1. target
        2. Element
        3. IE：R/W，DOM：R
        4. 引起事件的元素／物件
      19. type
        1. type
        2. String
        3. IE：R/W，DOM：R
        4. 事件的名稱
    2. 使用同一個函數處理多個事件
      1. window.onload=function(){ var objImg = document.getElementByTagName("img")[0]; objImg=handle; objImg=handle; } funcion handle(evt){ if (window.event) evt = window.event; //相容性處理 if (evt.type == "click") ...... else if (evt.type == "mouseover") ...... }
    3. 找出觸發事件的物件
      1. function handle(evt){ if(window.event) evt = window.event; var getTarget; if(evt.srcElement) //處理相容性，獲取IE事件目標 getTarget = evt.srcElement; else getTarget = evt.target; //獲取DOM事件目標 ...... }
    4. botton的值
      1. button
        1. 0
          1. 未按下按鍵
          2. 左鍵
        2. 1
          1. 左鍵
          2. 中鍵(滑輪)
        3. 2
          1. 右鍵
          2. 右鍵
        4. 3
          1. 同時按下左右鍵
          2. 不支援,undefined
        5. 4
          1. 中鍵(滑輪)
          2. 不支援,undefined
        6. 5
          1. 同時按下左中鍵
          2. 不支援,undefined
        7. 6
          1. 同時按下右中鍵
          2. 不支援,undefined
        8. 7
          1. 同時按下左中右鍵
          2. 不支援,undefined
      2. 3,不太可能出現，因為我們只有很小的機會能做分秘不差同時按下兩個按鍵
    5. 鍵盤事件
      1. 鍵盤重要的是：使用者按了什麼鍵？
        1. IE沒有charCode屬性， 而keyCode只有在keydown與keyup事件觸發時才會與標準DOM的keyCode相同， 在keypress事件中等於charCode
      2. if (window.event) { evt = window.event; evt.charCode=(evt.type == "keypress") ? evt.keyCode : 0; ... }
        1. 通常不採用keyCode是因為它表示鍵盤按鍵，而不是輸出字元， 例如輸出"a"和"A"時，keyCode的值是相等的，charCode則以字元為區分， 另外，在keypress事件中，DOM的keyCode值始終為0
  9. 參考資料
    1. IE在事件上有許多特立獨有的屬性，因相容性不佳，不建議使用，細部IE與其他Browser在Event的差異，請參考Link
    2. w3schools參考資料(en)
    3. w3school參考資料(簡)