言

前言寫點啥呢？實在不知道該說些什么。直接開始我們JavaScript系列的Event內容吧。

正文

一、什么是Event

JavaScript與HTML的交互是通過用戶或瀏覽器操作頁面時發生的事件（Event）來處理的。

當頁面加載時，它被稱為事件（Event）。當用戶單擊按鈕時，單擊也是一個事件（Event）。其他示例包括按任意鍵、關閉窗口、調整窗口大小等事件（Event）。

我們可以使用這些事件（Event）來執行JavaScript的響應，比如響應按鈕、向用戶顯示消息、驗證數據，等等。

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

接下來，我們通過幾個來理解一番：

二、onclick事件

這是用戶單擊鼠標左鍵時最常用的事件類型。上demo：

三、onsubmit事件

onsubmit是我們進行form表單時的事件。

接下來讓我們通過一個demo來了解如何使用onsubmit。在向Web服務器提交表單數據之前，我們將調用validate()。如果validate()返回true，則將提交表單，否則將不提交數據。

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

四、onmouseover和onmouseout事件

估計大家看名字就能猜到它們的作用吧？沒錯，當鼠標移到任何元素上時，onmouseover事件將觸發；而當鼠標移出該元素時，onmouseout將觸發。

上demo：

五、HTML 5標準Events

由于H5事件比較的，這里簡單羅列幾個，更多內容，大家有興趣可以前往官網一看究竟。

1. Offline：document脫機時觸發
2. onbeforeonload：在加載document之前觸發
3. onblur：當窗口失去焦點時觸發
4. oncanplaythrough：當媒體可以播放到末尾而不停止緩沖時觸發

......

尾聲

最近文章寫的有點多，內容質量不知道還能不能入各位的法眼...歇一歇有些累。

HTML 事件是發生在 HTML 元素上的事情。

當在 HTML 頁面中使用 JavaScript 時， JavaScript 可以觸發這些事件。

HTML 事件

HTML 事件可以是瀏覽器行為，也可以是用戶行為。

以下是 HTML 事件的實例：

• HTML 頁面完成加載

• HTML input 字段改變時

• HTML 按鈕被點擊

通常，當事件發生時，你可以做些事情。

在事件觸發時 JavaScript 可以執行一些代碼。

HTML 元素中可以添加事件屬性，使用 JavaScript 代碼來添加 HTML 元素。

單引號:

<some-HTML-element some-event='some JavaScript'>

雙引號:

<some-HTML-element some-event="some JavaScript">

在以下實例中，按鈕元素中添加了 onclick 屬性 (并加上代碼):

實例

<button onclick='getElementById("demo").innerHTML=Date()'>現在的時間是??</button>

以上實例中，JavaScript 代碼將修改 id="demo" 元素的內容。

在下一個實例中，代碼將修改自身元素的內容 (使用 this.innerHTML):

實例

<button onclick="this.innerHTML=Date()">現在的時間是?</button>

實例

<button onclick="displayDate()">現在的時間是?</button>

常見的HTML事件

下面是一些常見的HTML事件的列表:

更多事件列表: JavaScript 參考手冊 - HTML DOM 事件。

JavaScript 可以做什么?

事件可以用于處理表單驗證，用戶輸入，用戶行為及瀏覽器動作:

• 頁面加載時觸發事件

• 頁面關閉時觸發事件

• 用戶點擊按鈕執行動作

• 驗證用戶輸入內容的合法性

• 等等 ...

可以使用多種方法來執行 JavaScript 事件代碼：

• HTML 事件屬性可以直接執行 JavaScript 代碼

• HTML 事件屬性可以調用 JavaScript 函數

• 你可以為 HTML 元素指定自己的事件處理程序

• 你可以阻止事件的發生。

• 等等 ...

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！