22.事件入門

事件入門

 

學習要點：

1.事件介紹

2.內聯模式

3.腳本模式

4.事件處理函數

 

Javascript事件是由訪問Web頁面的用戶引發的一系列操做，例如：用戶點擊。當用戶執行某些操做的時候，再去執行

一系列代碼。

 

1、事件介紹

事件通常是用於瀏覽器和用戶操做進行交互。最先是IE和Netscap Navigator中出現，做爲分擔瀏覽器端運算負載的一

種手段。直到幾乎全部的瀏覽器都支持處理事件。而DOM2級規範開始嘗試以一種複合邏輯的方式標準化DOM事件，

IE九、Firefox、Opera、Safari和Chrome所有都實現了「DOM2級事件」模塊的核心部分。IE8以前瀏覽器仍然使用其

專有事件模型。

 

Javascript有三種事件模型：內聯模型、腳本模型和DOM2模型

 

 

 

2、內聯模型

這種模型是最傳統接單的一種處理事件的方法。在內聯模型中，事件處理函數是HTML標籤的一個屬性，用於處理指定

事件。雖然內聯在早起使用較多，但它是和HTML混寫的，並無與HTML分離。

 

 

//在HTML中把事件處理函數做爲屬性執行JS代碼

<input type="bottom" value="按鈕" onclick="alert('Lee');" /> //注意單雙引號

 

//在HTML中把事件處理函數做爲屬性執行JS函數

<input type="bottom" value="按鈕" onclick="box();" /> //執行JS函數

 

PS：函數不得放在window.onload裏面，這樣就看不見了。

 

 

3、腳本模型

因爲內聯模型違反了HTML與Javascript代碼層次分離的原則。爲了解決這個問題，咱們能夠在Javascript中處理事

件。這種處理方式就是腳本模型。

 

var input = document.getElementsByTagName('input')[0]; //獲得input對象

input.onclick = function(){ //匿名函數執行

alert('Lee');

};

 

 

PS：經過匿名函數，能夠直接觸發對應的代碼。也能夠經過指定的函數名賦值的方式來執行函數（賦值的函數名不

要跟着括號）。

var input = document.getElementsByTagName('input')[0];

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

function box(){

alert('Lee');

};

 

 

4、事件處理函數

Javascript能夠處理的事件類型爲：鼠標事件、鍵盤事件、HTML事件。

 

Javascript事件處理函數及其使用列表

 

事件處理函數 影響的元素 什麼時候發生

onabort 圖像 當圖像加載被中斷時

onblur 窗口、框架、全部表單對象 當焦點從對象上移開時

onchange 輸入框，選擇框和文本區域 當改變一個元素的值且失去焦點時

onclick 連接、按鈕、表單對象、圖像映射區域 當用戶單擊對象時

ondblclick         連接、按鈕、表單對象 當用戶雙擊對象時

ondragdrop 窗口 當用戶將一個對象拖放到瀏覽器窗口時

onError 腳本 當腳本中發生語法錯誤時

onfocus         窗口、框架、全部表單對象 當單擊鼠標或者將鼠標移動聚焦到窗口或框架時

onkeydown         文檔、圖像、連接、表單 當按鍵被按下時

onkeypress 文檔、圖像、連接、表單 當按鍵被按下而後鬆開時

onkeyup 文檔、圖像、連接、表單 當按鍵被鬆開時

onload 主題、框架集、圖像 文檔或圖像加載後

onunload 主題、框架集 文檔或框架集卸載後

onmouseout 連接 當圖標移除鏈接時

onmouseover 連接 當圖標移到鏈接時

onmove 窗口 當瀏覽器窗口移動時

onreset 表單復位按鈕 單擊表單的reset按鈕

onresize 窗口 當選擇一個表單對象時

onselect 表單元素         當選擇一個表單對象時

onsubmit 表單 當發送表格到服務器時

 

PS：全部的事件處理函數都有兩個部分組成，on+事件名稱，例如click事件處理函數就是：onclick。

在這裏，咱們主要談論腳本模型的方式來構建事件，違反分離原則的內聯模式，咱們忽略。

 

 

對於每個事件，它都有本身的觸發範圍和方式，若是超出了觸發範圍和方式，事件處理將失效。

 

1.鼠標事件，頁面全部元素均可觸發

onclick：當用戶單擊鼠標按鈕或按下回車鍵時觸發。

input.onclick = function(){

alert('Lee');

};

 

ondblclick：當用戶雙擊鼠標按鈕時觸發。

input.ondblclick = function(){

alert('journey');

};

 

onmousedown：當用戶按下鼠標還未彈起時觸發。

input.onmousedown = function(){

alert('journey');

};

 

onmouseup：當用戶釋放鼠標按鈕時觸發。

input.onmouseup = function(){

alert('Lee');

};

 

onmouseover：當鼠標移動到某個元素上方時觸發。

input.onmouseover = function(){

alert('journey');

};

 

onmouseout：當鼠標移出某個元素的上方時觸發。

input.onmouseout = function(){

alert('journey');

};

 

onmousemove：當鼠標指針在元素上移動時觸發。

input.onmousemove = function(){

alert('journey');

};

 

 

 

 

2.鍵盤事件

onkeydown：當用戶按下鍵盤上任意鍵時觸發，若是按住不放，會重複觸發。

 

onkeydown = function(){

alert('journey');

};

 

onkeypress：當用戶按下鍵盤上的字符鍵觸發，若是按住不放，會重複觸發。

onkeypress =function(){

alert('journey');

};

 

onkeyup：當用戶釋放鍵盤上的鍵觸發

onkeyup = function(){

alert('journey');

};

 

 

 

3.HTML事件

onload：當頁面徹底加載後在window上面觸發，或當框架集加載完畢後在框架集上觸發。

window.onload = function(){

alert('journey');

};

 

onunload：當頁面徹底卸載後在window上面觸發，或當框架集卸載後在框架集上面觸發。

window.onunload = function(){

alert('journey');

};

 

onselect：當用戶選擇文本框（input或textarea）中的一個或多個字符觸發。

input.onselect = function(){

alert('journey');

};

 

onchange：當文本框（input或textarea）內容改變且失去焦點後觸發。

input.onchage = function(){

alert('journey');

};

 

onfocus：當頁面或者元素得到焦點時在window及相關元素上面觸發。

input.onfocus = function(){

alert('journey');

};

 

onblur：當頁面或元素失去焦點時在window及相關元素上觸發。

input.onblur = function(){

alert('journey');

};

 

onsubmit：當用戶點擊提交按鈕在<form>元素上觸發。

form.onsubmit = function(){

alert('journey');

};

 

onreset：當用戶點擊重置按鈕在<form>元素上觸發。

form.onreset = function(){

alert('journey');

};

 

onresize：當窗口或框架的大小變化時在window或框架上觸發。

window.onresize =function(){

alert('journey');

};

 

onscroll：當用戶滾動滾動條的元素時觸發。

window.onscroll = function(){

alert('');

};