網頁

JavaScript Event(事件) - Mouse, Keyboard, HTML Event

Mouse Event(滑鼠事件)

透過event.type來取得的事件名稱沒有on開頭

JavaScript Mouse Event(滑鼠事件)
名稱說明
onmousedown按下mouse按鍵,不論左右鍵
onmousemove移動mouse
onmouseoutmouse指標離開HTML標籤
onmouseovermouse指標進入HTML標籤
onmouseup放開mouse按鍵
onclick按一下mouse左鍵
ondblclick按二下mouse左鍵

按一下Mouse共會引發三個事件,mousedown → mouseup → click。

隱藏Mouse右鍵選單

Mouse右鍵會觸發一個contextmenu事件,即選單事件,我們只要在contextmenu事件裡取消此事件產生動作,即可隱藏右鍵選單。

function blockMenu(Evt){
  // window.event 是IE才有的物件
  if(window.event){
    Evt = window.event;
    Evt.returnValue = false;//取消IE預設事件
  }else
    Evt.preventDefault();//取消DOM預設事件
}
document.oncontextmenu = blockMenu; 

Keyboard Event(鍵盤事件)

透過event.type來取得的事件名稱沒有on開頭。

JavaScript Keyboard Event(鍵盤事件)
名稱說明
onkeydown按下鍵盤按鍵
onkeypress在keydown與keyup之間的事件,或是按著不放時所觸發
onkeyup放開鍵盤按鍵

HTML Event(HTML事件)

透過event.type來取得的事件名稱沒有on開頭。

JavaScript HTML Event(HTML事件)
名稱說明
onload頁面完全載入後在window物件上觸發,圖片載入完成後在其上觸發
onunload頁面完全卸載後在window物件上觸發,圖片卸載完成後在其上觸發
onabort放棄圖片載入
onblur離開擁有處理權的物件
onchange在取得處理權後,更改過文字方塊的內容,離開文字方塊時觸發
onerror腳本出錯時在window物件上觸發,圖片無法載入時在其上觸發
onfocus指定物件擁有處理權
onreset重設表單
onselect選擇網頁內容
onsubmit送出表單

就我們在撰寫網頁相關程式碼中,又以onblur、onchange、onfocus、onreset、onselect、onsubmit這幾個表單事件(form event)最為重要,除了UI的程式碼外,表單是我們很重要與使用者互動的來源,一個良好的表單互動就能簡單讓您的網站有很大的加分的效果,所以這幾個事件的處理份量會比較重一些。

1 則留言:

  1. 大大你好,看了你的文讓我找到方法解決我遇到的問題,但想請問只有onkeypress,沒有onmousepress嗎?

    回覆刪除

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。