JavaScript筆記——事件
事件一般是用於瀏覽器和用戶操作進行交互。最早是 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筆記——事件