JavaScript事件是由訪(fǎng)問(wèn)Web頁(yè)面的用戶(hù)引起的一系列操作;
例如:用戶(hù)點(diǎn)擊;當(dāng)用戶(hù)執(zhí)行某些操作的時(shí)候,再去執(zhí)行一系列代碼;

一 事件介紹

 事件一般是用于瀏覽器和用戶(hù)操作進(jìn)行交互;最早是IE和Netscape Navigator中出現(xiàn),作為分擔(dān)服務(wù)器端元算負(fù)載的一種手段;
 而DOM2級(jí)規(guī)范開(kāi)始嘗試以一種符合邏輯的方式標(biāo)準(zhǔn)化DOM事件;
 IE9/Firefox/Opera/Safari和Chrome全部已經(jīng)實(shí)現(xiàn)了"DOM2級(jí)事件"模塊的核心部分;
 IE8之前瀏覽器仍然使用其專(zhuān)有事件模型;
 JavaScript有三種事件模型:內(nèi)聯(lián)模型/腳本模型和DOM2模型;

二 內(nèi)聯(lián)模型(HTML事件處理程序) 

這種模型是最傳統(tǒng)的簡(jiǎn)單的一種處理事件的方法;
在內(nèi)聯(lián)模型中,事件處理函數(shù)是HTML標(biāo)簽的一個(gè)屬性,用于處理指定事件;
雖然內(nèi)聯(lián)在早期使用較多,但它是和HTML混寫(xiě)的,并沒(méi)有與HTML分離;

在HTML中把事件處理函數(shù)作為屬性執(zhí)行JS代碼;
<input type="button" value="按鈕" onclick="alert('Lee');" /> 注意單雙引號(hào);
在HTML中把事件處理函數(shù)作為屬性執(zhí)行JS函數(shù);
<input type="button" value="按鈕" onclick="box();" /> 執(zhí)行JS的函數(shù);
PS:函數(shù)不得放到window.onload里面,這樣就看不見(jiàn)了; 

三 腳本模型(DOM0級(jí)事件處理程序)

// 由于內(nèi)聯(lián)模型違反了HTML和JavaScript代碼層次分離的原則;
// 我們可以在JavaScript中處理事件,這種處理方式就是腳本模型;
  var input = document.getElementsByTagName('input')[0];     // 得到input對(duì)象;
  input.onclick = function(){                  // 匿名函數(shù)執(zhí)行;
    alert('Lee');              
  }
  // PS:通過(guò)匿名函數(shù),可以直接觸發(fā)對(duì)應(yīng)的代碼;
  //  也可以通過(guò)指定的函數(shù)名賦值的方式來(lái)執(zhí)行函數(shù)(賦值的函數(shù)名不要跟括號(hào));
  input.onclick = box;                      // 把匿名函數(shù)賦值給事件處理函數(shù);
  input.onclick = null;                     // 刪除事件處理程序;

  四 事件處理函數(shù)

  // JavaScript可以處理的事件類(lèi)型為:鼠標(biāo)事件/鍵盤(pán)事件/HTML事件;
JavaScript事件處理函數(shù)及其使用列表
事件處理函數(shù) 影響的元素 何時(shí)發(fā)生
onabort 圖像 當(dāng)圖像加載被中斷時(shí);
onblur 窗口/框架/所有表單對(duì)象 當(dāng)焦點(diǎn)從對(duì)象上移開(kāi)時(shí);
onchange 輸入框/選擇框/文本域 當(dāng)改變一個(gè)元素的值且失去焦點(diǎn)時(shí);
onclick 鏈接/按鈕/表單對(duì)象/圖像等 當(dāng)用戶(hù)單擊對(duì)象時(shí);
ondblclick 鏈接/按鈕/表單對(duì)象 當(dāng)用戶(hù)雙擊對(duì)象時(shí);
ondragdrop 窗口 當(dāng)用戶(hù)將一個(gè)對(duì)象拖放到瀏覽器窗口時(shí);
onError 窗口/框架/所有表單對(duì)象 當(dāng)腳本中發(fā)生語(yǔ)法錯(cuò)誤時(shí);
onfocus 窗口/框架/所有表單對(duì)象 當(dāng)單擊鼠標(biāo)或?qū)⑹髽?biāo)移動(dòng)聚焦到窗口或框架時(shí);
onkeydown 文檔/圖像/鏈接/表單 當(dāng)按鍵被按下時(shí);
onkeypress 文檔/圖像/連接/表單 當(dāng)按鍵被按下然后松開(kāi)時(shí);
onkeyup 文檔/圖像/鏈接/表單 當(dāng)按鍵被松開(kāi)時(shí);
onload 主體/框架集/圖像 文檔或圖像加載后;
onunload 主體/框架集 文檔或框架集卸載后;
onmouseout 鏈接 當(dāng)圖標(biāo)移除鏈接時(shí);
onmouseover 鏈接 當(dāng)鼠標(biāo)移到鏈接時(shí);
onmove 窗口 當(dāng)瀏覽器窗口移動(dòng)時(shí);
onreset 表單復(fù)位按鈕 單擊表單的reset按鈕;
onresize 窗口 當(dāng)改變?yōu)g覽器窗口大小時(shí);
onselect 表單元素 當(dāng)選擇一個(gè)表單對(duì)象時(shí);
onsubmit 表單 當(dāng)發(fā)送表格到服務(wù)器時(shí);
// PS:對(duì)于每一個(gè)事件,它都有自己的觸發(fā)范圍和方式,事件處理將失效;

1.鼠標(biāo)事件,頁(yè)面所有元素都可觸發(fā)

(1).click:當(dāng)用戶(hù)單擊鼠標(biāo)按鈕或按下回車(chē)鍵時(shí)觸發(fā);
    input.onclick = function(){
        alert('Lee');
    };

(2).dblclick:當(dāng)用戶(hù)雙擊鼠標(biāo)按鈕時(shí)觸發(fā);
    input.ondblclick = function(){
        alert('Lee');
    }

(3).mousedown:當(dāng)用戶(hù)按下鼠標(biāo)還未彈起時(shí)觸發(fā);
    input.onmousedown = function(){
        alert('Lee');
    }

(4)mouseup:當(dāng)用戶(hù)釋放鼠標(biāo)按鈕時(shí)觸發(fā);
    input.onmouseup = function(){
        alert('Lee');
    }

(5).mouseover:當(dāng)鼠標(biāo)移到某個(gè)元素上方時(shí)觸發(fā);
    input.onmouseover = function(){
        alert('Lee');
    }

(6).mouseout:當(dāng)鼠標(biāo)移出某個(gè)元素上方時(shí)觸發(fā);
    input.onmouseout = function(){
        alert('Lee');
    }

(7).mousemove:當(dāng)鼠標(biāo)指針在元素上移動(dòng)時(shí)觸發(fā);
    input.onmousemove = function(){
        alert('Lee');
    }

2.鍵盤(pán)事件

 (1).keydown:當(dāng)用戶(hù)按下鍵盤(pán)上任意鍵觸發(fā),如果按住不放,會(huì)重復(fù)觸發(fā);
    onkeydown = function(){
        alert('Lee');
    }

(2).keypress:當(dāng)用戶(hù)按下鍵盤(pán)上的字符鍵觸發(fā),如果按住不放,會(huì)重復(fù)觸發(fā);
    onkeypress = function(){
        alert('Lee');
    }

(3).keyup:當(dāng)用戶(hù)釋放鍵盤(pán)上的鍵觸發(fā);
    onkeyup = function(){
        alert('Lee');
    }

3.HTML事件

(1).load:當(dāng)頁(yè)面完全加載后(包括所有圖像/JavaScript文件/CSS文件等外部資源),就會(huì)觸發(fā)window上面的load事件;
window.onload = function(){
alert('Lee');
}

// 圖像上面也可以觸發(fā)load事件,無(wú)論是在DOM中的圖像元素還是HTML中的圖像元素;
// 因此可以在HTML中為任何圖像指定onload事件處理程序;
<img src='smile.client.gif' onload="alert('Image loaded.')" >
// PS:新圖像元素不一定是從添加到文檔后才開(kāi)始下載,只要設(shè)置src屬性就會(huì)開(kāi)始下載;

// <script>元素也會(huì)觸發(fā)load事件,以便開(kāi)發(fā)人員確定動(dòng)態(tài)加載的JavaScript文件是否加載完畢;
// 與圖像不同,只有在設(shè)置了<script>元素的src屬性并將該元素添加到文檔后,才會(huì)開(kāi)始下載JavaScript文件;

 (2).unload:當(dāng)文檔被完全卸載后觸發(fā);
 // 只要用戶(hù)從一個(gè)頁(yè)面切換到另一個(gè)頁(yè)面,就會(huì)發(fā)生unload事件;
 // 而利用這個(gè)事件最多的情況是清除引用,以避免內(nèi)存泄漏;
     window.onunload = function(){
         alert('Lee');
     }
(3).select:當(dāng)用戶(hù)選擇文本框(input或textarea)內(nèi)容改變且失去焦點(diǎn)后觸發(fā);
     input.onselect = function(){
         alert('Lee');
     }
(4).change:當(dāng)文本框(input或textarea)內(nèi)容改變且失去焦點(diǎn)后觸發(fā);
     input.onchange = function(){
         alert('Lee');
     }
(5).focus:當(dāng)頁(yè)面或元素獲得焦點(diǎn)時(shí)在window及相關(guān)元素上面觸發(fā);這個(gè)事件不會(huì)冒泡;
     input.onfocus = function(){
         alert('Lee');
     }
(6).blur:當(dāng)頁(yè)面或元素失去焦點(diǎn)時(shí)在window及相關(guān)元素上觸發(fā);這個(gè)事件不會(huì)冒泡;
     input.onblur = function(){
         alert('Lee');
     }
(7).submit:當(dāng)用戶(hù)點(diǎn)擊提交按鈕在<form>元素上觸發(fā);
     form.onsubmit = function(){
         alert('Lee');
     }

(8).reset:當(dāng)用戶(hù)點(diǎn)擊重置按鈕在<form>元素上觸發(fā);
    form.onreset = function(){
        alert('Lee');
    }

(9).resize:當(dāng)瀏覽器窗口被調(diào)整到一個(gè)新的高度或?qū)挾葧r(shí),就會(huì)觸發(fā)resize事件;

// 這個(gè)事件在window(窗口)上觸發(fā);瀏覽器窗口最大化或最小化也會(huì)觸發(fā)resize事件;
// IE/Safari/Chrome和Opera會(huì)在瀏覽器變化時(shí)不斷觸發(fā)resize事件;
// Firefox則只會(huì)在用戶(hù)停止調(diào)整窗口大小時(shí)才會(huì)觸發(fā)resize事件;
    window.onresize = function(){
        alert('Lee');
    }

(10).scroll:當(dāng)用戶(hù)滾動(dòng)滾動(dòng)條的元素使觸發(fā);
    window.onscroll = function(){
        alert('Lee');
    }

最新評(píng)論