第一百一十九節，JavaScript事件入門

JavaScript事件入門

 

學習要點：

1.事件介紹

2.內聯模型

3.腳本模型

4.事件處理函數

 

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

 

一．事件介紹

事件通常是用於瀏覽器和用戶操做進行交互。最先是IE和Netscape Navigator中出現，做爲分擔服務器端運算負載的一種手段。直到幾乎全部的瀏覽器都支持事件處理。而DOM2級規範開始嘗試以一種複合邏輯的方式標準化DOM事件。IE九、Firefox、Opera、Safari和Chrome全都已經實現了「DOM2級事件」模塊的核心部分。IE8以前瀏覽器仍然使用其專有事件模型。

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

 

二．內聯模型

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

onclick事件處理函數，也就是鼠標點擊後執行一個事件

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

<input type="button" value="按鈕" onclick="alert('Lee');"  />

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

<!--也能夠在js文件裏寫一個函數，在元素標籤裏寫一個事件，用戶點擊後執行js文件裏的函數-->
<input type="button" value="按鈕" onclick="box();"  />

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

 

三．腳本模型

因爲內聯模型違反了HTML與JavaScript代碼層次分離的原則。爲了解決這個問題，咱們能夠在JavaScript中處理事件。這種處理方式就是腳本模型。

腳本模型1

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //腳本模型，事件
    //經過標籤名稱獲取到第一個元素節點
    var input = document.getElementsByTagName('input')[0];        //獲得input對象
    input.onclick = function () {    //經過元素節點執行一個事件，當用戶點擊後執行這個匿名函數
        alert('Lee'); //彈窗打印字符串
    };
};

腳本模型2

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //腳本模型，事件
    //經過標籤名稱獲取到第一個元素節點
    var input = document.getElementsByTagName('input')[0];        //獲得input對象
    //經過元素對象，添加一個事件，點擊後執行box函數
    input.onclick = box;  //這裏要注意是函數名稱，不要加括號，不然會自動執行函數

    //box函數
    function box() {    //經過元素節點執行一個事件，當用戶點擊後執行這個匿名函數
        alert('Lee'); //彈窗打印字符串
    }
};

 

四．事件處理函數

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：當用戶單擊鼠標按鈕或按下回車鍵時觸發。

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //腳本模型，事件
    //經過標籤名稱獲取到第一個元素節點
    var input = document.getElementsByTagName('input')[0];        //獲得input對象
    //經過元素對象，添加一個事件，點擊後執行匿名函數
    input.onclick = function () {
        alert('你好')
    }
};

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

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //腳本模型，事件
    //經過標籤名稱獲取到第一個元素節點
    var input = document.getElementsByTagName('input')[0];        //獲得input對象
    //經過元素對象，添加一個事件，點擊後執行匿名函數
    input.ondblclick = function () {
        alert('Lee');
    };
};

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

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //腳本模型，事件
    //經過標籤名稱獲取到第一個元素節點
    var input = document.getElementsByTagName('input')[0];        //獲得input對象
    //經過元素對象，添加一個事件，點擊後執行匿名函數
    input.onmousedown = function () {
        alert('Lee');
    };
};

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

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //腳本模型，事件
    //經過標籤名稱獲取到第一個元素節點
    var input = document.getElementsByTagName('input')[0];        //獲得input對象
    //經過元素對象，添加一個事件，點擊後執行匿名函數
    input.onmouseup = function () {
        alert('Lee');
    };
};

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

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //腳本模型，事件
    //經過標籤名稱獲取到第一個元素節點
    var input = document.getElementsByTagName('input')[0];        //獲得input對象
    //經過元素對象，添加一個事件，點擊後執行匿名函數
    input.onmouseover = function () {
        alert('Lee');
    };
};

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

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //腳本模型，事件
    //經過標籤名稱獲取到第一個元素節點
    var input = document.getElementsByTagName('input')[0];        //獲得input對象
    //經過元素對象，添加一個事件，點擊後執行匿名函數
    input.onmouseout = function () {
        alert('Lee');
    };
};

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

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //腳本模型，事件
    //經過標籤名稱獲取到第一個元素節點
    var input = document.getElementsByTagName('input')[0];        //獲得input對象
    //經過元素對象，添加一個事件，點擊後執行匿名函數
    input.onmousemove = function () {
        alert('Lee');
    };
};

 

2.鍵盤事件

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

onkeydown = function () {
    alert('Lee');
};

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

onkeypress = function () {
    alert('Lee');
};

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

onkeyup = function () {
    alert('Lee');
};

 

3.HTML事件

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

window.onload = function () {
    alert('Lee');
};

onunload：當頁面徹底卸載後在window上面觸發，或當框架集卸載後在框架集上觸發。測試須要刷新後才能看到

window.onunload = function () {
    alert('Lee');
};

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

//<input type="text" value="文本"/>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //腳本模型，事件
    //經過標籤名稱獲取到第一個元素節點
    var input = document.getElementsByTagName('input')[0];        //獲得input對象
    //經過元素對象，添加一個事件
    input.onselect = function () {
        alert('Lee');
    };
};

 onchange：當文本框(input或textarea)內容改變且失去焦點後觸發。也就是修改文本框內容後，鼠標在網頁的其餘任意地方點擊後激發

//<input type="text" value="文本"/>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //腳本模型，事件
    //經過標籤名稱獲取到第一個元素節點
    var input = document.getElementsByTagName('input')[0];        //獲得input對象
    //經過元素對象，添加一個事件
    input.onchange = function () {
        alert('Lee');
    };
};

onfocus：當頁面或者元素得到焦點時在window及相關元素上面觸發。好比，當鼠標點擊輸入框得到焦點時激發

//<input type="text" value="文本"/>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //腳本模型，事件
    //經過標籤名稱獲取到第一個元素節點
    var input = document.getElementsByTagName('input')[0];        //獲得input對象
    //經過元素對象，添加一個事件
    input.onfocus = function () {
        alert('Lee');
    };
};

onblur：當頁面或元素失去焦點時在window及相關元素上觸發。。好比，當鼠標點擊輸入框後鼠標離開輸入框後，點擊頁面其餘部位激發

//<input type="text" value="文本"/>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //腳本模型，事件
    //經過標籤名稱獲取到第一個元素節點
    var input = document.getElementsByTagName('input')[0];        //獲得input對象
    //經過元素對象，添加一個事件
    input.onblur = function () {
        alert('Lee');
    };
};

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

// <form>
//     <input type="text" value="文本"/>
//     <button type="submit">提交</button> 
// </form> window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數 //腳本模型，事件 //經過標籤名稱獲取到第一個元素節點 var form = document.getElementsByTagName('form')[0]; //獲得input對象 //經過元素對象，添加一個事件 form.onsubmit = function () { alert('Lee'); }; };

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

// <form>
//     <input type="text" value="文本"/>
//     <button type="submit">提交</button>
//     <button type="reset">重置</button>
// </form>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //腳本模型，事件
    //經過標籤名稱獲取到第一個元素節點
    var form = document.getElementsByTagName('form')[0];        //獲得input對象
    //經過元素對象，添加一個事件
    form.onreset = function () {
        alert('Lee');
    };
};

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

window.onresize = function () {
    alert('Lee');
};

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

window.onscroll = function () {
    alert('Lee');
};