一．事件介紹

事件一般是用于瀏覽器和用戶操作進(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之前瀏覽器仍然使用其專有事件模型酵熙。 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可以處理的事件類型為：鼠標(biāo)事件、鍵盤(pán)事件姥闪、HTML事件漓踢。

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

PS：所有的事件處理函數(shù)都會(huì)都有兩個(gè)部分組成，on + 事件名稱斩狱，例如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 style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: 16px; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.2px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">元素上觸發(fā)。</form>

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

reset：當(dāng)用戶點(diǎn)擊重置按鈕在

<form style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: 16px; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.2px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">元素上觸發(fā)说庭。</form>

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：以上程序的名詞解釋：click表示一個(gè)事件類型舅柜，單擊。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)致事件的元素旺订、事件的類型、以及其它與特定事件相關(guān)的信息超燃。

事件對(duì)象区拳，我們一般稱作為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ì)象眉撵，名稱不一定非要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上面最常用的一類事件散吵，畢竟鼠標(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);
    };

image

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;
    }
}