JavaScript事件是由訪問(wèn)Web頁(yè)面的用戶引起的一系列操作毙籽，例如：用戶點(diǎn)擊构韵。當(dāng)用戶執(zhí)行某些操作的時(shí)候娘汞，再去執(zhí)行一系列代碼掺逼。

一．事件介紹

事件一般是用于瀏覽器和用戶操作進(jìn)行交互娇澎。最早是IE和Netscape Navigator中出現(xiàn)，作為分擔(dān)服務(wù)器端運(yùn)算負(fù)載的一種手段铡溪。直到幾乎所有的瀏覽器都支持事件處理。而DOM2級(jí)規(guī)范開(kāi)始嘗試以一種復(fù)合邏輯的方式標(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)模型

這種模型是最傳統(tǒng)接單的一種處理事件的方法。在內(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('Mumu');"  />        //注意單雙引號(hào)

//在HTML中把事件處理函數(shù)作為屬性執(zhí)行JS函數(shù)

<input type="button" value="按鈕" onclick="box();"  />            //執(zhí)行JS的函數(shù)

PS：函數(shù)不得放到window.onload里面矾端，這樣就看不見(jiàn)了掏击。

三．腳本模型

由于內(nèi)聯(lián)模型違反了HTML與JavaScript代碼層次分離的原則。為了解決這個(gè)問(wèn)題秩铆，我們可以在JavaScript中處理事件砚亭。這種處理方式就是腳本模型。

    var input = document.getElementsByTagName('input')[0];      //得到input對(duì)象
    input.onclick = function () {                               //匿名函數(shù)執(zhí)行
        alert('Mumu');
    };

PS：通過(guò)匿名函數(shù)，可以直接觸發(fā)對(duì)應(yīng)的代碼钠惩。也可以通過(guò)指定的函數(shù)名賦值的方式來(lái)執(zhí)行函數(shù)(賦值的函數(shù)名不要跟著括號(hào))柒凉。

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

四．事件處理函數(shù)

JavaScript可以處理的事件類(lèi)型為：鼠標(biāo)事件、鍵盤(pán)事件篓跛、HTML事件膝捞。

JavaScript事件處理函數(shù)及其使用列表

PS：所有的事件處理函數(shù)都會(huì)都有兩個(gè)部分組成忙上，on + 事件名稱(chēng)拷呆，例如click事件的事件處理函數(shù)就是：onclick。在這里疫粥，我們主要談?wù)撃_本模型的方式來(lái)構(gòu)建事件茬斧，違反分離原則的內(nèi)聯(lián)模式，我們忽略掉梗逮。

對(duì)于每一個(gè)事件项秉，它都有自己的觸發(fā)范圍和方式，如果超出了觸發(fā)范圍和方式慷彤，事件處理將失效娄蔼。

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

click：當(dāng)用戶單擊鼠標(biāo)按鈕或按下回車(chē)鍵時(shí)觸發(fā)。

    input.onclick = function () {
        alert('Mumu');
    };

dblclick：當(dāng)用戶雙擊主鼠標(biāo)按鈕時(shí)觸發(fā)岁诉。

    input.ondblclick = function () {
        alert('Mumu');
    };

mousedown：當(dāng)用戶按下了鼠標(biāo)還未彈起時(shí)觸發(fā)锚沸。

    input.onmousedown = function () {
        alert('Mumu');
    };

mouseup：當(dāng)用戶釋放鼠標(biāo)按鈕時(shí)觸發(fā)。

    input.onmouseup = function () {
        alert('Mumu');
    };

mouseover：當(dāng)鼠標(biāo)移到某個(gè)元素上方時(shí)觸發(fā)涕癣。

    input.onmouseover = function () {
        alert('Mumu');
    };

mouseout：當(dāng)鼠標(biāo)移出某個(gè)元素上方時(shí)觸發(fā)哗蜈。

    input.onmouseout = function () {
        alert('Mumu');
    };

mousemove：當(dāng)鼠標(biāo)指針在元素上移動(dòng)時(shí)觸發(fā)。

    input.onmousemove = function () {
        alert('Mumu');
    };

2.鍵盤(pán)事件

keydown：當(dāng)用戶按下鍵盤(pán)上任意鍵觸發(fā)坠韩，如果按住不放距潘，會(huì)重復(fù)觸發(fā)。

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

keypress：當(dāng)用戶按下鍵盤(pán)上的字符鍵觸發(fā)只搁，如果按住不放音比，會(huì)重復(fù)觸發(fā)。

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

keyup：當(dāng)用戶釋放鍵盤(pán)上的鍵觸發(fā)氢惋。

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

3.HTML事件

load：當(dāng)頁(yè)面完全加載后在window上面觸發(fā)洞翩，或當(dāng)框架集加載完畢后在框架集上觸發(fā)。

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

unload：當(dāng)頁(yè)面完全卸載后在window上面觸發(fā)焰望，或當(dāng)框架集卸載后在框架集上觸發(fā)菱农。

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

select：當(dāng)用戶選擇文本框(input或textarea)中的一個(gè)或多個(gè)字符觸發(fā)。

   input.onselect = function () {
       alert('Mumu');
   };

change：當(dāng)文本框(input或textarea)內(nèi)容改變且失去焦點(diǎn)后觸發(fā)柿估。

    input.onchange = function () {
        alert('Mumu');
    };

focus：當(dāng)頁(yè)面或者元素獲得焦點(diǎn)時(shí)在window及相關(guān)元素上面觸發(fā)。

    input.onfocus = function () {
        alert('Mumu');
    };

blur：當(dāng)頁(yè)面或元素失去焦點(diǎn)時(shí)在window及相關(guān)元素上觸發(fā)陷猫。

input.onblur = function () {
        alert('Mumu');
    };

submit：當(dāng)用戶點(diǎn)擊提交按鈕在<form>元素上觸發(fā)秫舌。

    form.onsubmit = function () {
        alert('Mumu');
    };

reset：當(dāng)用戶點(diǎn)擊重置按鈕在<form>元素上觸發(fā)。

form.onreset= function () {
        alert('Mumu');
    };

resize：當(dāng)窗口或框架的大小變化時(shí)在window或框架上觸發(fā)绣檬。

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

scroll：當(dāng)用戶滾動(dòng)帶滾動(dòng)條的元素時(shí)觸發(fā)足陨。

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

事件對(duì)象

學(xué)習(xí)要點(diǎn)：

1. 事件對(duì)象
2. 鼠標(biāo)事件
3. 鍵盤(pán)事件
4. W3C與IE

一．事件對(duì)象
事件處理函數(shù)的一個(gè)標(biāo)準(zhǔn)特性是，以某些方式訪問(wèn)的事件對(duì)象包含有關(guān)于當(dāng)前事件的上下文信息娇未。
事件處理三部分組成：對(duì)象.事件處理函數(shù)=函數(shù)墨缘。例如：?jiǎn)螕粑臋n任意處。

   document.onclick = function () {
       alert('Mumu');
   };

PS：以上程序的名詞解釋?zhuān)篶lick表示一個(gè)事件類(lèi)型零抬，單擊镊讼。onclick表示一個(gè)事件處理函數(shù)或綁定對(duì)象的屬性(或者叫事件監(jiān)聽(tīng)器、偵聽(tīng)器)平夜。document表示一個(gè)綁定的對(duì)象蝶棋，用于觸發(fā)某個(gè)元素區(qū)域。function()匿名函數(shù)是被執(zhí)行的函數(shù)忽妒，用于觸發(fā)后執(zhí)行玩裙。

除了用匿名函數(shù)的方法作為被執(zhí)行的函數(shù)兼贸，也可以設(shè)置成獨(dú)立的函數(shù)。

    document.onclick = box;                     //直接賦值函數(shù)名即可吃溅，無(wú)須括號(hào)
    function box() {
        alert('Mumu');
    }

this關(guān)鍵字和上下文
在面向?qū)ο竽钦挛覀兞私獾剑涸谝粋€(gè)對(duì)象里溶诞，由于作用域的關(guān)系，this代表著離它最近對(duì)象决侈。

    var input = document.getElementsByTagName('input')[0];
    input.onclick = function () {
        alert(this.value);                  //HTMLInputElement螺垢，this表示input對(duì)象
    };

從上面的拆分，我們并沒(méi)有發(fā)現(xiàn)本章的重點(diǎn)：事件對(duì)象颜及。那么事件對(duì)象是什么甩苛？它在哪里呢？當(dāng)觸發(fā)某個(gè)事件時(shí)俏站，會(huì)產(chǎn)生一個(gè)事件對(duì)象讯蒲，這個(gè)對(duì)象包含著所有與事件有關(guān)的信息。包括導(dǎo)致事件的元素肄扎、事件的類(lèi)型墨林、以及其它與特定事件相關(guān)的信息。

事件對(duì)象犯祠，我們一般稱(chēng)作為event對(duì)象旭等，這個(gè)對(duì)象是瀏覽器通過(guò)函數(shù)把這個(gè)對(duì)象作為參數(shù)傳遞過(guò)來(lái)的。那么首先衡载，我們就必須驗(yàn)證一下搔耕，在執(zhí)行函數(shù)中沒(méi)有傳遞參數(shù)，是否可以得到隱藏的參數(shù)痰娱。

function box() {                            //普通空參函數(shù)
        alert(arguments.length);                    //0弃榨，沒(méi)有得到任何傳遞的參數(shù)
    }

input.onclick = function () {                   //事件綁定的執(zhí)行函數(shù)
        alert(arguments.length);                    //1，得到一個(gè)隱藏參數(shù)
    };

通過(guò)上面兩組函數(shù)中梨睁，我們發(fā)現(xiàn)鲸睛，通過(guò)事件綁定的執(zhí)行函數(shù)是可以得到一個(gè)隱藏參數(shù)的。說(shuō)明坡贺，瀏覽器會(huì)自動(dòng)分配一個(gè)參數(shù)官辈，這個(gè)參數(shù)其實(shí)就是event對(duì)象。

    input.onclick = function () {
        alert(arguments[0]);                    //MouseEvent遍坟，鼠標(biāo)事件對(duì)象
    };

上面這種做法比較累拳亿，那么比較簡(jiǎn)單的做法是，直接通過(guò)接收參數(shù)來(lái)得到即可政鼠。

input.onclick = function (evt) {                //接受event對(duì)象风瘦，名稱(chēng)不一定非要event
        alert(evt);                             //MouseEvent，鼠標(biāo)事件對(duì)象
    };

直接接收event對(duì)象公般，是W3C的做法万搔，IE不支持胡桨，IE自己定義了一個(gè)event對(duì)象，直接在window.event獲取即可瞬雹。

    input.onclick = function (evt) {
        var e = evt || window.event;                //實(shí)現(xiàn)跨瀏覽器兼容獲取event對(duì)象
        alert(e);
    };

二．鼠標(biāo)事件

鼠標(biāo)事件是Web上面最常用的一類(lèi)事件昧谊，畢竟鼠標(biāo)還是最主要的定位設(shè)備。那么通過(guò)事件對(duì)象可以獲取到鼠標(biāo)按鈕信息和屏幕坐標(biāo)獲取等酗捌。

1. 可視區(qū)及屏幕坐標(biāo)

事件對(duì)象提供了兩組來(lái)獲取瀏覽器坐標(biāo)的屬性呢诬，一組是頁(yè)面可視區(qū)左邊，另一組是屏幕坐標(biāo)胖缤。

坐標(biāo)屬性
屬性 說(shuō)明
clientX 可視區(qū)X坐標(biāo)尚镰，距離左邊框的位置
clientY 可視區(qū)Y坐標(biāo)，距離上邊框的位置
screenX 屏幕區(qū)X坐標(biāo)哪廓，距離左屏幕的位置
screenY 屏幕區(qū)Y坐標(biāo)狗唉，距離上屏幕的位置

    document.onclick = function (evt) {         
        var e = evt || window.event;
        alert(e.clientX + ',' + e.clientY);
        alert(e.screenX + ',' + e.screenY);
    };

2.修改鍵

有時(shí)，我們需要通過(guò)鍵盤(pán)上的某些鍵來(lái)配合鼠標(biāo)來(lái)觸發(fā)一些特殊的事件涡真。這些鍵為：Shfit分俯、Ctrl、Alt和Meat(Windows中就是Windows鍵哆料，蘋(píng)果機(jī)中是Cmd鍵)缸剪，它們經(jīng)常被用來(lái)修改鼠標(biāo)事件和行為，所以叫修改鍵东亦。

修改鍵屬性
屬性 說(shuō)明
shiftKey 判斷是否按下了Shfit鍵
ctrlKey 判斷是否按下了ctrlKey鍵
altKey 判斷是否按下了alt鍵
metaKey 判斷是否按下了windows鍵杏节，IE不支持

三．鍵盤(pán)事件

1.鍵碼
在發(fā)生keydown和keyup事件時(shí)，event對(duì)象的keyCode屬性中會(huì)包含一個(gè)代碼典阵，與鍵盤(pán)上一個(gè)特定的鍵對(duì)應(yīng)拢锹。對(duì)數(shù)字字母字符集，keyCode屬性的值與ASCII碼中對(duì)應(yīng)小寫(xiě)字母或數(shù)字的編碼相同萄喳。字母中大小寫(xiě)不影響。

    document.onkeydown = function (evt) {
        alert(evt.keyCode);                     //按任意鍵蹋半，得到相應(yīng)的keyCode
    };

不同的瀏覽器在keydown和keyup事件中他巨，會(huì)有一些特殊的情況：
在Firefox和Opera中，分號(hào)鍵時(shí)keyCode值為59减江，也就是ASCII中分號(hào)的編碼染突；而IE和Safari返回186，即鍵盤(pán)中按鍵的鍵碼辈灼。
PS：其他一些特殊情況由于瀏覽器版本太老和市場(chǎng)份額太低份企，這里不做補(bǔ)充。

2.字符編碼
Firefox巡莹、Chrome和Safari的event對(duì)象都支持一個(gè)charCode屬性司志，這個(gè)屬性只有在發(fā)生keypress事件時(shí)才包含值甜紫，而且這個(gè)值是按下的那個(gè)鍵所代表字符的ASCII編碼。此時(shí)的keyCode通常等于0或者也可能等于所按鍵的編碼骂远。IE和Opera則是在keyCode中保存字符的ASCII編碼囚霸。

function getCharCode(evt) {
    var e = evt || window.event;
    if (typeof e.charCode == 'number') {
        return e.charCode;
    } else {
        return e.keyCode;
    }
}

PS：可以使用String.fromCharCode()將ASCII編碼轉(zhuǎn)換成實(shí)際的字符。