1. 程式人生 > >JavaScript筆記——事件

JavaScript筆記——事件

跟著 bsp ava eset 窗口 輸入框 put cli 交互

事件一般是用於瀏覽器和用戶操作進行交互。最早是 IE 和 Netscape Navigator 中出現, 作為分擔服務器端運算負載的一種手段。直到幾乎所有的瀏覽器都支持事件處理。而 DOM2 級規範開始嘗試以一種復合邏輯的方式標準化 DOM 事件

JavaScript 有三種事件模型:內聯模型、腳本模型和 DOM2 模型

內聯模型

這種模型是最傳統接單的一種處理事件的方法。在內聯模型中,事件處理函數是 HTML 標簽的一個屬性,用於處理指定事件。雖然內聯在早期使用較多,但它是和 HTML 混寫的, 並沒有與 HTML 分離

//在 HTML 中把事件處理函數作為屬性執行 JS 代碼
<input type="button" value="按鈕" onclick="alert(‘abc‘);" /> //註意單雙引號 //在 HTML 中把事件處理函數作為屬性執行 JS 函數 <input type="button" value="按鈕" onclick="box();" /> //執行 JS 的函數,函數不得放到 window.onload 裏面,這樣就看不見了

腳本模型

由於內聯模型違反了 HTML 與 JavaScript 代碼層次分離的原則。為了解決這個問題,我 們可以在 JavaScript 中處理事件。這種處理方式就是腳本模型

var input = document.getElementsByTagName(‘input‘)[0]; //
得到 input 對象 input.onclick = function () { //匿名函數執行 alert(‘abc‘); };

通過匿名函數,可以直接觸發對應的代碼。也可以通過指定的函數名賦值的方式 來執行函數(賦值的函數名不要跟著括號)

input.onclick = box; //把函數名賦值給事件處理函數

事件處理函數

JavaScript 可以處理的事件類型為:鼠標事件、鍵盤事件、HTML 事件

部分事件處理函數 :

事件處理函數 影響的元素 何時發生
onchange 輸入框,選擇框和文本區域 當改變一個元素的值且失去焦點時
onclick 鏈接、按鈕、表單對象、圖像映射區域 當用戶單擊對象時
ondblclick 鏈接、按鈕、表單對象 當用戶雙擊對象時
onkeydown 文檔、圖像、鏈接、表單 當按鍵被按下時
onkeyup 文檔、圖像、鏈接、表單 當按鍵被松開時
onkeypress 文檔、圖像、鏈接、表單 當按鍵被按下然後松開時
onload 主題、框架集、圖像 文檔或圖像加載後
onunload 主體、框架集 文檔或框架集卸載後
onmove 窗口 當瀏覽器窗口移動時
onselect 表單元素 當選擇一個表單對象時
onsubmit 表單 當發送表格到服務器時
onreset 表單復位按鈕 單擊表單的 reset 按鈕

所有的事件處理函數都會都有兩個部分組成,on + 事件名稱,例如 click 事件的事 件處理函數就是:onclick。對於每一個事件,它都有自己的觸發範圍和方式,如果超出了觸發範圍和方式,事件處理將失效

1.鼠標事件,頁面所有元素都可觸發

click:當用戶單擊鼠標按鈕或按下回車鍵時觸發

input.onclick = function () { alert(‘abc‘); };

dblclick:當用戶雙擊主鼠標按鈕時觸發

input.ondblclick = function () { alert(‘abc‘); };

2.鍵盤事件

keydown:當用戶按下鍵盤上任意鍵觸發,如果按住不放,會重復觸發

onkeydown = function () {
alert(‘abc‘);
};

keypress:當用戶按下鍵盤上的字符鍵觸發,如果按住不放,會重復觸發

onkeypress = function () { alert(‘abc‘); };

keyup:當用戶釋放鍵盤上的鍵觸發

onkeyup = function () { alert(‘abc‘); };

3.HTML 事件

load:當頁面完全加載後在 window 上面觸發,或當框架集加載完畢後在框架集上觸發

window.onload = function () { alert(‘abc‘); };

unload:當頁面完全卸載後在 window 上面觸發,或當框架集卸載後在框架集上觸發

window.onunload = function () { alert(‘abc‘); };

select:當用戶選擇文本框(input 或 textarea)中的一個或多個字符觸發

input.onselect = function () { alert(‘abc‘); };

change:當文本框(input 或 textarea)內容改變且失去焦點後觸發

input.onchange = function () { alert(‘abc‘); };

submit:當用戶點擊提交按鈕在<form>元素上觸發

form.onsubmit = function () { alert(‘abc‘); };

reset:當用戶點擊重置按鈕在<form>元素上觸發

form.onreset= function () { alert(‘abc‘); };

JavaScript筆記——事件