溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JavaScript中的事件是什么，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
在本文中，我們將討論事件處理程序、事件監(jiān)聽器和事件對(duì)象。我們還將介紹三種不同的處理事件的方法，以及一些最常見的事件。通過(guò)了解事件，您將能夠?yàn)橛脩籼峁└呓换バ缘膚eb體驗(yàn)。
事件是發(fā)生在瀏覽器中的操作，可以由用戶或?yàn)g覽器本身發(fā)起。以下是一些發(fā)生在網(wǎng)站上的常見事件:
頁(yè)面完成加載
用戶單擊一個(gè)按鈕
用戶將鼠標(biāo)懸停在下拉列表中
用戶提交表單
用戶按下鍵盤上的鍵
通過(guò)對(duì)在事件上執(zhí)行的JavaScript響應(yīng)進(jìn)行編碼，開發(fā)人員可以向用戶顯示消息，驗(yàn)證數(shù)據(jù)，對(duì)按鈕單擊做出反應(yīng)以及執(zhí)行許多其他操作。
事件處理程序和事件偵聽器
當(dāng)用戶單擊按鈕或按下某個(gè)鍵時(shí)，將觸發(fā)一個(gè)事件。這些分別稱為單擊事件或按鍵事件。
一個(gè)事件處理程序是運(yùn)行在一個(gè)事件觸發(fā)JavaScript函數(shù)。
一個(gè)事件偵聽器附加一個(gè)響應(yīng)界面的元素，它允許特定元素等待和“監(jiān)聽”給定的事件觸發(fā)。
將事件分配給元素有三種方法：
內(nèi)聯(lián)事件處理程序
事件處理程序?qū)傩?/p>
事件聽眾
我們將詳細(xì)介紹這三種方法，以確保您熟悉觸發(fā)事件的每種方法，然后討論每種方法的優(yōu)缺點(diǎn)。
內(nèi)聯(lián)事件處理程序?qū)傩?/strong>
要開始學(xué)習(xí)事件處理程序，我們首先考慮內(nèi)聯(lián)事件處理程序。讓我們從一個(gè)非?；镜睦娱_始，它由一個(gè)按鈕元素和一個(gè)p元素組成。我們希望用戶單擊按鈕來(lái)更改p的文本內(nèi)容。
讓我們從一個(gè)帶有按鈕的HTML頁(yè)面開始。我們將引用一個(gè)我們稍后會(huì)添加代碼的JavaScript文件。
<!DOCTYPE html>
<html>
<head>
<title>Events</title></head>
<body>
<!-- Add button -->
<button>Click me</button>
<p>Try to change me.</p>
</body>
<!-- Reference JavaScript file -->
<script src="js/events.js"></script>
</html>直接在按鈕上，我們將添加一個(gè)名為onclick的屬性。屬性值將是我們創(chuàng)建的一個(gè)名為changeText()的函數(shù)。
<!DOCTYPE html>
<html>
<head>
<title>Events</title></head>
<body>
<button onclick="changeText()">Click me</button>
<p>Try to change me.</p>
</body>
<script src="js/events.js"></script>
</html>讓我們創(chuàng)建events.js文件，它位于這里的js/目錄中。在其中，我們將創(chuàng)建changeText()函數(shù)，它將修改p元素的textContent。
// Function to modify the text content of the paragraph
const changeText = () = >{
const p = document.querySelector('p');
p.textContent = "I changed because of an inline event handler.";
}首次加載events.html，您會(huì)看到如下所示的頁(yè)面：
但是，當(dāng)您或其他用戶單擊按鈕時(shí)，p標(biāo)記的文本將從Try to change me更改為。我改變了，因?yàn)閮?nèi)聯(lián)事件處理程序。
內(nèi)聯(lián)事件處理程序是開始理解事件的一種直接方法，但是通常不應(yīng)該超出測(cè)試和教育目的而使用它們。
您可以將內(nèi)聯(lián)事件處理程序與HTML元素上的內(nèi)聯(lián)CSS樣式進(jìn)行比較。維護(hù)單獨(dú)的類樣式表比在每個(gè)元素上創(chuàng)建內(nèi)聯(lián)樣式更為實(shí)際，就像維護(hù)完全通過(guò)單獨(dú)的腳本文件處理的JavaScript而不是向每個(gè)元素添加處理程序一樣。
事件處理程序?qū)傩?/strong>
內(nèi)聯(lián)事件處理程序的下一步是事件處理程序?qū)傩?。這與內(nèi)聯(lián)處理程序非常相似，只是我們?cè)贘avaScript中設(shè)置了元素的屬性，而不是HTML中的屬性。
這里的設(shè)置是一樣的，只是我們不再在標(biāo)記中包含onclick="changeText()":
… < body >
<button > Click me < /button>
<p>I will change.</p >
</body>
…/我們的函數(shù)也將保持類似，只是現(xiàn)在我們需要訪問(wèn)JavaScript中的button元素。我們可以簡(jiǎn)單地訪問(wèn)onclick，就像訪問(wèn)style或id或任何其他元素屬性一樣，然后分配函數(shù)引用。
// Function to modify the text content of the paragraph
const changeText = () = >{
const p = document.querySelector('p');
p.textContent = "I changed because of an event handler property.";
}
// Add event handler as a property of the button element
const button = document.querySelector('button');
button.onclick = changeText;注意:事件處理程序不遵循大多數(shù)JavaScript代碼遵循的camelCase約定。注意代碼是onclick，而不是onclick。
當(dāng)你第一次載入網(wǎng)頁(yè)時(shí)，瀏覽器會(huì)顯示以下內(nèi)容:
現(xiàn)在，當(dāng)你點(diǎn)擊這個(gè)按鈕，它會(huì)有一個(gè)類似的效果:
請(qǐng)注意，當(dāng)將函數(shù)引用傳遞給onclick屬性時(shí)，我們不包含括號(hào)，因?yàn)槲覀儺?dāng)時(shí)沒(méi)有調(diào)用函數(shù)，而只是傳遞了對(duì)它的引用。
事件處理程序?qū)傩缘目删S護(hù)性略好于內(nèi)聯(lián)處理程序，但它仍然存在一些相同的障礙。例如，嘗試設(shè)置多個(gè)單獨(dú)的onclick屬性將導(dǎo)致覆蓋除最后一個(gè)外的所有屬性，如下所示。
const p = document.querySelector('p');
const button = document.querySelector('button');
const changeText = () = >{
p.textContent = "Will I change?";
}
const alertText = () = >{
alert('Will I alert?');
}
// Events can be overwritten
button.onclick = changeText;
button.onclick = alertText;在上面的例子中，單擊按鈕只會(huì)顯示一個(gè)警告，而不會(huì)更改p文本，因?yàn)閍lert()代碼是最后添加到屬性的代碼。
了解了內(nèi)聯(lián)事件處理程序和事件處理程序?qū)傩灾?，讓我們轉(zhuǎn)向事件偵聽器。
事件監(jiān)聽器
JavaScript事件處理程序的最新添加是事件偵聽器。事件偵聽器監(jiān)視元素上的事件。我們將使用addEventListener()方法偵聽事件，而不是直接將事件分配給元素上的屬性。
addEventListener()接受兩個(gè)強(qiáng)制參數(shù)——要偵聽的事件和偵聽器回調(diào)函數(shù)。
事件監(jiān)聽器的HTML與前面的示例相同。
… < button > Click me < /button>
<p>I will change.</p > …我們?nèi)匀粚⑹褂门c以前相同的changeText()函數(shù)。我們將把a(bǔ)ddEventListener()方法附加到按鈕上。
// Function to modify the text content of the paragraph
const changeText = () = >{
const p = document.querySelector('p');
p.textContent = "I changed because of an event listener.";
}
// Listen for click event
const button = document.querySelector('button');
button.addEventListener('click', changeText);注意，對(duì)于前兩個(gè)方法，click事件被稱為onclick，但是對(duì)于事件監(jiān)聽器，它被稱為click。每個(gè)事件監(jiān)聽器都會(huì)從單詞中刪除這個(gè)詞。在下一節(jié)中，我們將查看更多其他類型事件的示例。
當(dāng)您用上面的JavaScript代碼重新加載頁(yè)面時(shí)，您將收到以下輸出:
初看起來(lái)，事件監(jiān)聽器看起來(lái)與事件處理程序?qū)傩苑浅Ｏ嗨?，但它們有一些?yōu)點(diǎn)。我們可以在同一個(gè)元素上設(shè)置多個(gè)事件偵聽器，如下例所示。
const p = document.querySelector('p');
const button = document.querySelector('button');
const changeText = () = >{
p.textContent = "Will I change?";
}
const alertText = () = >{
alert('Will I alert?');
}
// Multiple listeners can be added to the same event and element
button.addEventListener('click', changeText);
button.addEventListener('click', alertText);在本例中，這兩個(gè)事件都將觸發(fā)，一旦單擊退出警告，就向用戶提供一個(gè)警告和修改后的文本。
通常，將使用匿名函數(shù)而不是事件偵聽器上的函數(shù)引用。匿名函數(shù)是沒(méi)有命名的函數(shù)。
// An anonymous function on an event listener
button.addEventListener('click', () = >{
p.textContent = "Will I change?";
});還可以使用removeEventListener()函數(shù)從元素中刪除一個(gè)或所有事件。
// Remove alert function from button element
button.removeEventListener('click', alertText);此外，您可以在文檔和窗口對(duì)象上使用addEventListener()。
事件監(jiān)聽器是當(dāng)前在JavaScript中處理事件的最常見和首選的方法。
常見的事件
我們已經(jīng)了解了使用click事件的內(nèi)聯(lián)事件處理程序、事件處理程序?qū)傩院褪录陕犉?，但是JavaScript中還有更多的事件。下面我們將討論一些最常見的事件。
鼠標(biāo)事件
鼠標(biāo)事件是最常用的事件之一。它們指的是涉及單擊鼠標(biāo)上的按鈕或懸停并移動(dòng)鼠標(biāo)指針的事件。這些事件還對(duì)應(yīng)于觸摸設(shè)備上的等效操作。
| 事件 | 描述 |
|---|---|
| click | 當(dāng)鼠標(biāo)被按下并釋放到元素上時(shí)觸發(fā) |
| dblclick | 當(dāng)元素被單擊兩次時(shí)觸發(fā) |
| mouseenter | 當(dāng)指針進(jìn)入元素時(shí)觸發(fā) |
| mouseleave | 當(dāng)指針離開一個(gè)元素時(shí)觸發(fā) |
| mousemove | 每當(dāng)指針在元素中移動(dòng)時(shí)觸發(fā) |
單擊是一個(gè)復(fù)合事件，由組合的mousedown和mouseup事件組成，當(dāng)分別按下或抬起鼠標(biāo)按鈕時(shí)，將觸發(fā)這兩個(gè)事件。
使用mouseenter和mouseleave同時(shí)創(chuàng)建一個(gè)懸停效果，只要鼠標(biāo)指針停留在元素上，懸停效果就會(huì)持續(xù)。
表單事件
表單事件是與表單相關(guān)的操作，例如正在選擇或未選擇的輸入元素，以及正在提交的表單。
| 事件 | 描述 |
|---|---|
| submit | 提交表單時(shí)觸發(fā) |
| focus | 當(dāng)元素(如輸入)收到焦點(diǎn)時(shí)觸發(fā) |
| blur | 當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā) |
當(dāng)選擇一個(gè)元素時(shí)，例如，通過(guò)鼠標(biāo)單擊或通過(guò)TAB鍵導(dǎo)航到它，就可以實(shí)現(xiàn)焦點(diǎn)。
JavaScript通常用于提交表單并將值發(fā)送到后端語(yǔ)言。使用JavaScript發(fā)送表單的優(yōu)點(diǎn)是，提交表單不需要重新加載頁(yè)面，并且可以使用JavaScript驗(yàn)證所需的輸入字段。
鍵盤事件
鍵盤事件用于處理鍵盤操作，例如按下一個(gè)鍵、舉起一個(gè)鍵和按住一個(gè)鍵。
| 事件 | 描述 |
|---|---|
| keydown | 按下某個(gè)鍵時(shí)會(huì)觸發(fā)一次 |
| keyup | 釋放鑰匙時(shí)觸發(fā)一次 |
| keypress | 按鍵時(shí)連續(xù)激發(fā) |
盡管它們看起來(lái)很相似，但keydown和keypress事件不能訪問(wèn)所有完全相同的鍵。keydown將確認(rèn)按下的每個(gè)鍵，而keypress將省略不生成字符的鍵，如SHIFT、ALT或DELETE。
鍵盤事件具有訪問(wèn)單個(gè)鍵的特定屬性。
如果將一個(gè)稱為事件對(duì)象的參數(shù)傳遞給事件偵聽器，我們就可以訪問(wèn)有關(guān)所發(fā)生的操作的更多信息。與鍵盤對(duì)象相關(guān)的三個(gè)屬性包括keyCode、key和code。
例如，如果用戶按下鍵盤上的字母a鍵，與該鍵相關(guān)的下列屬性就會(huì)出現(xiàn):
| 屬性 | 描述 | 例 |
|---|---|---|
| keyCode | 與鍵有關(guān)的數(shù)字。 | 65 |
| key | 表示字符名 | a |
| code | 表示按下的物理鍵 | KeyA |
為了展示如何通過(guò)JavaScript控制臺(tái)收集這些信息，我們可以編寫以下代碼行。
// Test the keyCode, key, and code properties
document.addEventListener('keydown', event = >{
console.log('key: ' + event.keyCode);
console.log('key: ' + event.key);
console.log('code: ' + event.code);
});一旦在控制臺(tái)上按下ENTER鍵，現(xiàn)在就可以按鍵盤上的鍵了，在本例中，我們將按a。
輸出：
keyCode: 65 key: a code: KeyA
keyCode屬性是一個(gè)與已按下的鍵相關(guān)的數(shù)字。key屬性是字符的名稱，它可以更改——例如，用SHIFT鍵按下a將導(dǎo)致鍵為a。code屬性表示鍵盤上的物理鍵。
注意，keyCode正在被廢棄，最好在新項(xiàng)目中使用代碼。
事件對(duì)象
該Event對(duì)象由所有事件都可以訪問(wèn)的屬性和方法組成。除了通用Event對(duì)象之外，每種類型的事件都有自己的擴(kuò)展名，例如KeyboardEvent和MouseEvent。
該Event對(duì)象作為參數(shù)傳遞給偵聽器函數(shù)。它通常寫成event或e。我們可以訪問(wèn)事件的code屬性keydown來(lái)復(fù)制PC游戲的鍵盤控件。
要試用它，請(qǐng)使用<p>標(biāo)記創(chuàng)建基本HTML文件并將其加載到瀏覽器中。
<!DOCTYPE html>
<html>
<head>
<title>Events</title></head>
<body>
<p>
</p>
</body>
</html>然后，在瀏覽器的開發(fā)者控制臺(tái)中鍵入以下JavaScript代碼。
// Pass an event through to a listener
document.addEventListener('keydown', event = >{
var element = document.querySelector('p');
// Set variables for keydown codes
var a = 'KeyA';
var s = 'KeyS';
var d = 'KeyD';
var w = 'KeyW';
// Set a direction for each code
switch (event.code) {
case a:
element.textContent = 'Left';
break;
case s:
element.textContent = 'Down';
break;
case d:
element.textContent = 'Right';
break;
case w:
element.textContent = 'Up';
break;
}
});當(dāng)您按下一個(gè)鍵- ，a，s，d或者w-你會(huì)看到類似以下的輸出：
從這里開始，您可以繼續(xù)開發(fā)瀏覽器的響應(yīng)方式以及按下這些鍵的用戶，并可以創(chuàng)建更加動(dòng)態(tài)的網(wǎng)站。
接下來(lái)，我們將介紹一個(gè)最常用的事件屬性：target屬性。在下面的示例中，我們div在一個(gè)內(nèi)部有三個(gè)元素section。
<!DOCTYPE html>
<html>
<head>
<title>Events</title></head>
<body>
<section>
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div></section>
</body>
</html>使用事件。在瀏覽器的開發(fā)人員控制臺(tái)中，我們可以將一個(gè)事件偵聽器放在外部section元素上，并獲得嵌套最深的元素。
const section = document.querySelector('section');
// Print the selected target
section.addEventListener('click', event = >{
console.log(event.target);
});單擊其中任何一個(gè)元素都將使用event.target將相關(guān)特定元素的輸出返回到控制臺(tái)。這非常有用，因?yàn)樗试S您只放置一個(gè)事件偵聽器，該偵聽器可用于訪問(wèn)許多嵌套元素。
使用Event對(duì)象，我們可以設(shè)置與所有事件相關(guān)的響應(yīng)，包括通用事件和更具體的擴(kuò)展。
結(jié)論
事件是在網(wǎng)站上發(fā)生的操作，例如單擊，懸停，提交表單，加載頁(yè)面或按鍵盤上的鍵。當(dāng)我們能夠讓網(wǎng)站響應(yīng)用戶所采取的操作時(shí)，JavaScript就變得真正具有互動(dòng)性和動(dòng)態(tài)性。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享JavaScript中的事件是什么內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼