在本文中，我們將討論事件處理程序、事件監(jiān)聽(tīng)器和事件對(duì)象。我們還將介紹三種不同的處理事件的方法，以及一些最常見(jiàn)的事件。通過(guò)了解事件，您將能夠?yàn)橛脩?hù)提供更具交互性的web體驗(yàn)。

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：主機(jī)域名、虛擬空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、阿拉善盟網(wǎng)站維護(hù)、網(wǎng)站推廣。

事件是發(fā)生在瀏覽器中的操作，可以由用戶(hù)或?yàn)g覽器本身發(fā)起。以下是一些發(fā)生在網(wǎng)站上的常見(jiàn)事件:

頁(yè)面完成加載

用戶(hù)單擊一個(gè)按鈕

用戶(hù)將鼠標(biāo)懸停在下拉列表中

用戶(hù)提交表單

用戶(hù)按下鍵盤(pán)上的鍵

通過(guò)對(duì)在事件上執(zhí)行的JavaScript響應(yīng)進(jìn)行編碼，開(kāi)發(fā)人員可以向用戶(hù)顯示消息，驗(yàn)證數(shù)據(jù)，對(duì)按鈕單擊做出反應(yīng)以及執(zhí)行許多其他操作。

事件處理程序和事件偵聽(tīng)器

當(dāng)用戶(hù)單擊按鈕或按下某個(gè)鍵時(shí)，將觸發(fā)一個(gè)事件。這些分別稱(chēng)為單擊事件或按鍵事件。

一個(gè)事件處理程序是運(yùn)行在一個(gè)事件觸發(fā)JavaScript函數(shù)。

一個(gè)事件偵聽(tīng)器附加一個(gè)響應(yīng)界面的元素，它允許特定元素等待和“監(jiān)聽(tīng)”給定的事件觸發(fā)。

將事件分配給元素有三種方法：

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

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

事件聽(tīng)眾

我們將詳細(xì)介紹這三種方法，以確保您熟悉觸發(fā)事件的每種方法，然后討論每種方法的優(yōu)缺點(diǎn)。

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

要開(kāi)始學(xué)習(xí)事件處理程序，我們首先考慮內(nèi)聯(lián)事件處理程序。讓我們從一個(gè)非?；镜睦娱_(kāi)始，它由一個(gè)按鈕元素和一個(gè)p元素組成。我們希望用戶(hù)單擊按鈕來(lái)更改p的文本內(nèi)容。

讓我們從一個(gè)帶有按鈕的HTML頁(yè)面開(kāi)始。我們將引用一個(gè)我們稍后會(huì)添加代碼的JavaScript文件。

  
  
    
  
  
    
    Click me
    
Try to change me.
  
  
  

直接在按鈕上，我們將添加一個(gè)名為onclick的屬性。屬性值將是我們創(chuàng)建的一個(gè)名為changeText()的函數(shù)。

  
  
    
  
  
    Click me
    
Try to change me.
  
  

讓我們創(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)您或其他用戶(hù)單擊按鈕時(shí)，p標(biāo)記的文本將從Try to change me更改為。我改變了，因?yàn)閮?nèi)聯(lián)事件處理程序。

內(nèi)聯(lián)事件處理程序是開(kāi)始理解事件的一種直接方法，但是通常不應(yīng)該超出測(cè)試和教育目的而使用它們。

您可以將內(nèi)聯(lián)事件處理程序與HTML元素上的內(nèi)聯(lián)CSS樣式進(jìn)行比較。維護(hù)單獨(dú)的類(lèi)樣式表比在每個(gè)元素上創(chuàng)建內(nèi)聯(lián)樣式更為實(shí)際，就像維護(hù)完全通過(guò)單獨(dú)的腳本文件處理的JavaScript而不是向每個(gè)元素添加處理程序一樣。

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

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

這里的設(shè)置是一樣的，只是我們不再在標(biāo)記中包含onclick="changeText()":

… < body >

 Click me < /button>

    
I will change.


…/

我們的函數(shù)也將保持類(lèi)似，只是現(xiàn)在我們需要訪(fǎng)問(wèn)JavaScript中的button元素。我們可以簡(jiǎn)單地訪(fǎng)問(wèn)onclick，就像訪(fǎng)問(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è)類(lèi)似的效果:

請(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)向事件偵聽(tīng)器。

事件監(jiān)聽(tīng)器

JavaScript事件處理程序的最新添加是事件偵聽(tīng)器。事件偵聽(tīng)器監(jiān)視元素上的事件。我們將使用addEventListener()方法偵聽(tīng)事件，而不是直接將事件分配給元素上的屬性。

addEventListener()接受兩個(gè)強(qiáng)制參數(shù)——要偵聽(tīng)的事件和偵聽(tīng)器回調(diào)函數(shù)。

事件監(jiān)聽(tīng)器的HTML與前面的示例相同。

… < button > Click me < /button>

    
I will change.
 …

我們?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事件被稱(chēng)為onclick，但是對(duì)于事件監(jiān)聽(tīng)器，它被稱(chēng)為click。每個(gè)事件監(jiān)聽(tīng)器都會(huì)從單詞中刪除這個(gè)詞。在下一節(jié)中，我們將查看更多其他類(lèi)型事件的示例。

當(dāng)您用上面的JavaScript代碼重新加載頁(yè)面時(shí)，您將收到以下輸出:

初看起來(lái)，事件監(jiān)聽(tīng)器看起來(lái)與事件處理程序?qū)傩苑浅Ｏ嗨?，但它們有一些?yōu)點(diǎn)。我們可以在同一個(gè)元素上設(shè)置多個(gè)事件偵聽(tīng)器，如下例所示。

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ā)，一旦單擊退出警告，就向用戶(hù)提供一個(gè)警告和修改后的文本。

通常，將使用匿名函數(shù)而不是事件偵聽(tīng)器上的函數(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)聽(tīng)器是當(dāng)前在JavaScript中處理事件的最常見(jiàn)和選擇的方法。

常見(jiàn)的事件

我們已經(jīng)了解了使用click事件的內(nèi)聯(lián)事件處理程序、事件處理程序?qū)傩院褪录陕?tīng)器，但是JavaScript中還有更多的事件。下面我們將討論一些最常見(jiàn)的事件。

鼠標(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)指針離開(kāi)一個(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)證所需的輸入字段。

鍵盤(pán)事件

鍵盤(pán)事件用于處理鍵盤(pán)操作，例如按下一個(gè)鍵、舉起一個(gè)鍵和按住一個(gè)鍵。

事件描述
keydown按下某個(gè)鍵時(shí)會(huì)觸發(fā)一次keyup釋放鑰匙時(shí)觸發(fā)一次keypress按鍵時(shí)連續(xù)激發(fā)

盡管它們看起來(lái)很相似，但keydown和keypress事件不能訪(fǎng)問(wèn)所有完全相同的鍵。keydown將確認(rèn)按下的每個(gè)鍵，而keypress將省略不生成字符的鍵，如SHIFT、ALT或DELETE。

鍵盤(pán)事件具有訪(fǎng)問(wèn)單個(gè)鍵的特定屬性。

如果將一個(gè)稱(chēng)為事件對(duì)象的參數(shù)傳遞給事件偵聽(tīng)器，我們就可以訪(fǎng)問(wèn)有關(guān)所發(fā)生的操作的更多信息。與鍵盤(pán)對(duì)象相關(guān)的三個(gè)屬性包括keyCode、key和code。

例如，如果用戶(hù)按下鍵盤(pán)上的字母a鍵，與該鍵相關(guān)的下列屬性就會(huì)出現(xiàn):

屬性描述例keyCode與鍵有關(guān)的數(shù)字。65key表示字符名acode表示按下的物理鍵KeyA

為了展示如何通過(guò)JavaScript控制臺(tái)收集這些信息，我們可以編寫(xiě)以下代碼行。

// 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)在就可以按鍵盤(pán)上的鍵了，在本例中，我們將按a。

輸出：

keyCode: 65
key: a
code: KeyA

keyCode屬性是一個(gè)與已按下的鍵相關(guān)的數(shù)字。key屬性是字符的名稱(chēng)，它可以更改——例如，用SHIFT鍵按下a將導(dǎo)致鍵為a。code屬性表示鍵盤(pán)上的物理鍵。

注意，keyCode正在被廢棄，最好在新項(xiàng)目中使用代碼。

事件對(duì)象

該Event對(duì)象由所有事件都可以訪(fǎng)問(wèn)的屬性和方法組成。除了通用Event對(duì)象之外，每種類(lèi)型的事件都有自己的擴(kuò)展名，例如KeyboardEvent和MouseEvent。

該Event對(duì)象作為參數(shù)傳遞給偵聽(tīng)器函數(shù)。它通常寫(xiě)成event或e。我們可以訪(fǎng)問(wèn)事件的code屬性keydown來(lái)復(fù)制PC游戲的鍵盤(pán)控件。

要試用它，請(qǐng)使用

標(biāo)記創(chuàng)建基本HTML文件并將其加載到瀏覽器中。

然后，在瀏覽器的開(kāi)發(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ì)看到類(lèi)似以下的輸出：

從這里開(kāi)始，您可以繼續(xù)開(kāi)發(fā)瀏覽器的響應(yīng)方式以及按下這些鍵的用戶(hù)，并可以創(chuàng)建更加動(dòng)態(tài)的網(wǎng)站。

接下來(lái)，我們將介紹一個(gè)最常用的事件屬性：target屬性。在下面的示例中，我們div在一個(gè)內(nèi)部有三個(gè)元素section。

  
  
    
  
  
    

      
One
      
Two
      
Three
  

使用事件。在瀏覽器的開(kāi)發(fā)人員控制臺(tái)中，我們可以將一個(gè)事件偵聽(tīng)器放在外部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è)事件偵聽(tīng)器，該偵聽(tīng)器可用于訪(fǎng)問(wèn)許多嵌套元素。

使用Event對(duì)象，我們可以設(shè)置與所有事件相關(guān)的響應(yīng)，包括通用事件和更具體的擴(kuò)展。

結(jié)論

事件是在網(wǎng)站上發(fā)生的操作，例如單擊，懸停，提交表單，加載頁(yè)面或按鍵盤(pán)上的鍵。當(dāng)我們能夠讓網(wǎng)站響應(yīng)用戶(hù)所采取的操作時(shí)，JavaScript就變得真正具有互動(dòng)性和動(dòng)態(tài)性。

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：編程入門(mén)！！
分享題目：深入理解JavaScript中的事件
文章路徑：http://weahome.cn/article/cgicoh.html