言

前言寫點(diǎn)啥呢？實(shí)在不知道該說些什么。直接開始我們JavaScript系列的Event內(nèi)容吧。

正文

一、什么是Event

JavaScript與HTML的交互是通過用戶或?yàn)g覽器操作頁(yè)面時(shí)發(fā)生的事件（Event）來(lái)處理的。

當(dāng)頁(yè)面加載時(shí)，它被稱為事件（Event）。當(dāng)用戶單擊按鈕時(shí)，單擊也是一個(gè)事件（Event）。其他示例包括按任意鍵、關(guān)閉窗口、調(diào)整窗口大小等事件（Event）。

我們可以使用這些事件（Event）來(lái)執(zhí)行JavaScript的響應(yīng)，比如響應(yīng)按鈕、向用戶顯示消息、驗(yàn)證數(shù)據(jù)，等等。

事件（Event）是文檔對(duì)象模型（DOM）級(jí)別3（原文：Document Object Model (DOM) Level 3）的一部分，每個(gè)HTML元素都包含一組可以觸發(fā)JavaScript代碼的事件（Event）。

接下來(lái)，我們通過幾個(gè)來(lái)理解一番：

二、onclick事件

這是用戶單擊鼠標(biāo)左鍵時(shí)最常用的事件類型。上demo：

三、onsubmit事件

onsubmit是我們進(jìn)行form表單時(shí)的事件。

接下來(lái)讓我們通過一個(gè)demo來(lái)了解如何使用onsubmit。在向Web服務(wù)器提交表單數(shù)據(jù)之前，我們將調(diào)用validate()。如果validate()返回true，則將提交表單，否則將不提交數(shù)據(jù)。

PS：這里涉及的都是一些偽碼，此外涉及一些前后端交互的內(nèi)容。由于篇幅原理，這里不會(huì)過多的涉及。

四、onmouseover和onmouseout事件

估計(jì)大家看名字就能猜到它們的作用吧？沒錯(cuò)，當(dāng)鼠標(biāo)移到任何元素上時(shí)，onmouseover事件將觸發(fā)；而當(dāng)鼠標(biāo)移出該元素時(shí)，onmouseout將觸發(fā)。

上demo：

五、HTML 5標(biāo)準(zhǔn)Events

由于H5事件比較的，這里簡(jiǎn)單羅列幾個(gè)，更多內(nèi)容，大家有興趣可以前往官網(wǎng)一看究竟。

1. Offline：document脫機(jī)時(shí)觸發(fā)
2. onbeforeonload：在加載document之前觸發(fā)
3. onblur：當(dāng)窗口失去焦點(diǎn)時(shí)觸發(fā)
4. oncanplaythrough：當(dāng)媒體可以播放到末尾而不停止緩沖時(shí)觸發(fā)

......

尾聲

最近文章寫的有點(diǎn)多，內(nèi)容質(zhì)量不知道還能不能入各位的法眼...歇一歇有些累。

avaScript 事件是由訪問 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ī)范開始嘗試以一種復(fù)合邏輯的方式標(biāo)準(zhǔn)化 DOM 事件。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 混寫的 ，并沒有與 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ù)

函數(shù)不得放到 window.onload 里面，這樣就看不見了。

三． 腳本模型

由于內(nèi)聯(lián)模型違反了 HTML 與 JavaScript 代碼層次分離的原則。為了解決這個(gè)問題， 我

們可以在 JavaScript 中處理事件。這種處理方式就是腳本模型。

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

input.onclick=function () { //匿名函數(shù)執(zhí)行

alert('Lee');

};

TML中不同的屬性支持略有區(qū)別。所謂的通用屬性即全局屬性，是所有元素都支持的一些屬性，mdn里解釋如下

全局屬性是所有HTML元素共有的屬性; 它們可以用于所有元素，即使屬性可能對(duì)某些元素不起作用。

我們可以在所有的HTML元素上指定全局屬性，甚至是在標(biāo)準(zhǔn)里沒有指定的元素。這意味著任何非標(biāo)準(zhǔn)元素仍必須能夠應(yīng)用這些屬性，即使使用這些元素意味著文檔不再是html5兼容的。例如，雖然<foo>不是一個(gè)有效的HTML元素，但是html5兼容的瀏覽器隱藏了標(biāo)記為<foo hidden>...<foo>的內(nèi)容。

除了基本的HTML全局屬性之外，還存在以下全局屬性:

• xml:lang 和 xml:base ——兩者都是從XHTML規(guī)范繼承，但為了兼容性而被保留的。
• 多重aria-*屬性，用于改善可訪問性。
• 事件處理程序?qū)傩裕簅nabort, onautocomplete, onautocompleteerror, onblur, oncance, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.

H5保留的常用全局屬性

• id：指定元素唯一標(biāo)識(shí)。
• style：為元素指定樣式。
• class：用于匹配css樣式選擇器。
• dir：指定文字內(nèi)容方向。ltr、rtl
• title：指定元素額外信息，一般鼠標(biāo)移上去會(huì)顯示。
• lang：告訴瀏覽器或搜索引擎，標(biāo)簽內(nèi)所使用的的語(yǔ)言。en ja ch
• accesskey：指定鍵盤按鍵，可使得元素快速獲取焦點(diǎn)。
• tabindex：切換焦點(diǎn)順序。

HTML新增的全局屬性

• contentEditable：boolean是否可直接編輯html里的內(nèi)容。HTMLElement接口提供了isContentEditable屬性。
• hidden：boolean隱藏即相當(dāng)于display:none.很有用！
• spellcheck：是否對(duì)用戶輸入的內(nèi)容進(jìn)行文本檢查。
• autocapitalize：控制用戶的文本輸入是否和如何自動(dòng)大寫，它可以有以下的值：
• off or none，沒有應(yīng)用自動(dòng)大寫（所有字母都默認(rèn)為小寫字母）。
• on or sentences，每個(gè)句子的第一個(gè)字母默認(rèn)為大寫字母;所有其他字母都默認(rèn)為小寫字母。
• words，每個(gè)單詞的第一個(gè)字母默認(rèn)為大寫字母;所有其他字母都默認(rèn)為小寫字母。
• characters，所有的字母都應(yīng)該默認(rèn)為大寫。
• contextmenu：右鍵菜單，暫無(wú)支持。
• data-*：一類自定義數(shù)據(jù)屬性，它賦予我們?cè)谒?HTML 元素上嵌入自定義數(shù)據(jù)屬性和與腳本交換數(shù)據(jù)的能力，HTMLElement.dataset.* 可以訪問讀寫它們。
• draggable：boolean指示是否可以 使用 H5新增的拖放API 拖動(dòng)元素
• is：允許您指定標(biāo)準(zhǔn)HTML元素應(yīng)該像已注冊(cè)的自定義內(nèi)置元素一樣。框架和HTML組件會(huì)用到。