JavaScript 事件(Events)

事件是在瀏覽器中發(fā)生的操作，可由用戶或瀏覽器本身啟動。

以下是一些可能在網(wǎng)站上發(fā)生的常見事件的示例：

• 頁面加載完成

• 用戶單擊一個按鈕

• 用戶滾動文檔

• 用戶調(diào)整瀏覽器大小

• 用戶移動鼠標

• 用戶提交表單

• 用戶按下鍵盤上的一個鍵

• HTML輸入字段已更改

每個可用事件都有一個事件處理程序，該事件處理程序是代碼塊（通常是用戶定義的JavaScript函數(shù)），將在事件觸發(fā)時運行。

通過了解事件，您將能夠為最終用戶提供更具交互性的Web體驗。

一個簡單的實例

當(dāng)事件觸發(fā)時，例如用戶單擊按鈕時，可以執(zhí)行JavaScript代碼塊。

在下面的示例中，我們有一個按鈕，按下該按鈕將調(diào)用showDate()函數(shù)：

<button onclick="showDate()">Click me</button>

JavaScript showDate()函數(shù)如下所示：

<script>
function showDate() {
   document.getElementById("output").innerHTML = new Date();
}
</script>

使用事件的方式

可以通過三種方式將事件分配給元素，以便在關(guān)聯(lián)事件觸發(fā)時將其運行：

• 內(nèi)聯(lián)事件處理程序

• 事件處理程序?qū)傩?/p>

• 事件監(jiān)聽器

我們將介紹所有三種方法，以確保您熟悉觸發(fā)事件的每種方式。

內(nèi)聯(lián)事件處理程序?qū)傩?/h2>

要將事件分配給HTML元素，我們可以使用HTML事件屬性。

在以下示例中，當(dāng)用戶單擊<p>元素時，其內(nèi)容會更改：

示例

<p onclick="this.innerHTML = 'Hello world'">單擊此處更改此文本</p>

測試看看?/?

在下面的示例中，當(dāng)用戶單擊<p>元素時，將調(diào)用一個函數(shù)：

示例

<p onclick="changeText(this)">單擊此處更改此文本</p>

<script>
function changeText(self) {
   self.innerHTML = "Hello world";
}
</script>

測試看看?/?

在下面的示例中，我們有一個按鈕，按下該按鈕將使背景變?yōu)殡S機顏色：

示例

<button onclick="bgChange()">Click me</button>

<script>
function bgChange() {
   let color = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   document.body.style.backgroundColor = color;
}
</script>

測試看看?/?

內(nèi)聯(lián)事件處理程序是開始理解事件的簡單方法，但通常不應(yīng)將其用于測試和教育目的之外。

事件處理程序?qū)傩?/h2>

內(nèi)聯(lián)事件處理程序的下一步是事件處理程序?qū)傩?/strong>。這與內(nèi)聯(lián)處理程序非常相似，除了我們在JavaScript中設(shè)置元素的屬性而不是HTML中的屬性。

在以下示例中，我們將為id為“ para”的HTML元素分配onclick事件：

示例

let para = document.querySelector("#para");

para.onclick = function() {
   this.innerHTML = "Hello world";
}

測試看看?/?

我們還可以將事件處理程序?qū)傩栽O(shè)置為等于命名函數(shù)名稱：

示例

let para = document.querySelector("#para");
para.onclick = changeText;

function changeText() {
   para.innerHTML = "Hello world";
}

測試看看?/?

在上面的示例中，將名為changeText的函數(shù)分配給具有id="para"的HTML元素。

單擊該元素時將執(zhí)行該功能。

在下面的示例中，我們有一個按鈕，按下該按鈕將使背景變?yōu)殡S機顏色：

示例

let btn = document.querySelector("button");
btn.onclick = bgChange;

function bgChange() {
   let color = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   document.body.style.backgroundColor = color;
}

測試看看?/?

注意：事件處理程序不遵循大多數(shù)JavaScript代碼所遵循的camelCase 駝峰命名約定。注意，代碼是onclick，不是onClick。

onfocus和onblur事件

onfocus當(dāng)元素獲得焦點時觸發(fā)該事件。

onblur當(dāng)元素失去焦點時會觸發(fā)該事件。

<input type="text" onfocus="func1(this)" onblur="func2(this)">

onchange事件

onchange元素的值更改時將觸發(fā)該事件。

<input type="text" onchange="myFunc(this)" value="Hello">

onmouseover和onmouseout事件

onmouseover當(dāng)將指針設(shè)備（通常是鼠標）移動到元素或其子元素之一時，將觸發(fā)該事件。

onmouseout當(dāng)將指針設(shè)備（通常是鼠標）移離元素或其子元素之一時，將觸發(fā)該事件。

進一步閱讀

HTML參考：HTML事件屬性參考

JavaScript參考：HTML DOM事件對象參考