JavaScriptのイベントを理解する

前書き

Understanding the DOMシリーズでは、https://www.digitalocean.com/community/tutorialsについて説明しました。 / understanding-the-dom-tree-and-nodes [DOMツリー]および方法https://www.digitalocean.com/community/tutorials/how-to-access-elements-in-the-dom[access] 、https://www.digitalocean.com/community/tutorials/how-to-traverse-the-dom [traverse]、https://www.digitalocean.com/community/tutorials/how-to-make-changes- to-the-dom [追加と削除]、およびhttps://www.digitalocean.com/community/tutorials/how-to-modify-attributes-classes-and-styles-in-the-dom[modify]ノードとhttps://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console[Developer Tools Console]を使用する要素。

この時点で、DOMに必要な変更を加えることができますが、ユーザーの観点からは、手動で変更をトリガーするだけなので、あまり役に立ちません。 イベントについて学ぶことで、すべてを結び付けてインタラクティブなWebサイトを作成する方法を理解します。

*イベント*は、ユーザーまたはブラウザー自体のいずれかによって開始できるブラウザーで発生するアクションです。 以下は、Webサイトで発生する可能性のある一般的なイベントの例です。

  • ページの読み込みが完了します

  • ユーザーがボタンをクリックする

  • ユーザーがドロップダウンにカーソルを合わせます

  • ユーザーがフォームを送信します

  • ユーザーがキーボードのキーを押す

イベントで実行されるJavaScript応答をコーディングすることにより、開発者はユーザーへのメッセージの表示、データの検証、ボタンクリックへの反応、およびその他の多くのアクションを実行できます。

この記事では、イベントハンドラー、イベントリスナー、およびイベントオブジェクトについて説明します。 また、イベントを処理するコードを記述する3つの異なる方法と、いくつかの最も一般的なイベントについても説明します。 イベントについて学習することで、エンドユーザーにとってよりインタラクティブなWebエクスペリエンスを実現できます。

イベントハンドラーとイベントリスナー

ユーザーがボタンをクリックするか、キーを押すと、イベントが発生します。 これらは、それぞれクリックイベントまたはキー押下イベントと呼ばれます。

*イベントハンドラ*は、イベントが発生したときに実行されるJavaScript関数です。

*イベントリスナ*は、レスポンシブインターフェイスを要素にアタッチします。これにより、その特定の要素は、指定されたイベントが発生するのを待ち、「リッスン」できます。

イベントを要素に割り当てるには、次の3つの方法があります。

  • インラインイベントハンドラー

  • イベントハンドラのプロパティ

  • イベントリスナー

3つの方法すべてを検討して、イベントがトリガーされる各方法に精通していることを確認してから、各方法の長所と短所について説明します。

インラインイベントハンドラー属性

イベントハンドラーについて学習を始めるために、まず*インラインイベントハンドラー*を検討します。 「+ button 」要素と「 p 」要素で構成される非常に基本的な例から始めましょう。 ユーザーに「+ボタン」をクリックして、「 p +」のテキストコンテンツを変更してもらいたい。

まず、本文にボタンがあるHTMLページから始めましょう。 コードを少し追加するJavaScriptファイルを参照します。

events.html

<!DOCTYPE html>
<html lang="en-US">

<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>

+ button`に直接、 + onclick`という属性を追加します。 属性値は、 `+ changeText()+`と呼ばれる作成した関数になります。

events.html

<!DOCTYPE html>
<html lang="en-US">

<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>

`+ events.js `ファイルを作成して、ここの ` js / `ディレクトリに配置します。 その中で、 ` changeText()`関数を作成し、 ` p `要素の ` textContent +`を変更します。

js / events.js

// 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`をロードすると、次のようなページが表示されます。

image:https://assets.digitalocean.com/articles/eng_javascript/dom/events-1.png [events.htmlの最初のレンダリング]

ただし、あなたまたは別のユーザーがボタンをクリックすると、 `+ p `タグのテキストは、 ` Try to change me。`から ` I changed for because inline event handler。+`に変わります。

image:https://assets.digitalocean.com/articles/eng_javascript/dom/events-2.png [events.htmlレンダリングのイベントに対する最初の応答]

インラインイベントハンドラーは、イベントの理解を開始するための簡単な方法ですが、通常はテストや教育目的以外に使用しないでください。

HTML要素のインラインイベントハンドラーとインラインCSSスタイルを比較できます。 すべての要素にインラインスタイルを作成するよりも、クラスの個別のスタイルシートを維持する方がはるかに実用的です。すべての要素にハンドラーを追加するよりも、個別のスクリプトファイルで完全に処理されるJavaScriptを維持する方が実行可能です。

イベントハンドラのプロパティ

インラインイベントハンドラーからの次のステップは、*イベントハンドラープロパティ*です。 これはインラインハンドラーと非常によく似ていますが、HTMLの属性ではなくJavaScriptの要素のプロパティを設定している点が異なります。

ここでは、マークアップに `+ onclick =" changeText() "+`を含めないことを除いて、セットアップは同じです。

events.html

...
<body>

   <button>Click me</button>

   <p>I will change.</p>

</body>
...

JavaScriptの `+ button`要素にアクセスする必要がある場合を除き、関数も同様に残ります。 `+ style `または ` id `またはその他の要素プロパティにアクセスするのと同じように、単に ` onclick +`にアクセスしてから、関数参照を割り当てます。

js / events.js

// 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;

最初にページをロードすると、ブラウザに次が表示されます。

image:https://assets.digitalocean.com/articles/eng_javascript/dom/events-3.png [イベントハンドラーによるevents.htmlの初期ロード]

ボタンをクリックすると、以前と同様の効果が得られます。

image:https://assets.digitalocean.com/articles/eng_javascript/dom/events-4.png [events.htmlのイベントハンドラーによる応答]

関数参照を `+ onclick +`プロパティに渡すとき、その瞬間に関数を呼び出すのではなく、参照のみを渡すため、括弧を含めないことに注意してください。

イベントハンドラープロパティは、インラインハンドラーよりも保守性がわずかに優れていますが、それでも同じハードルがいくつかあります。 たとえば、複数の別個の `+ onclick +`プロパティを設定しようとすると、以下に示すように、最後のプロパティを除くすべてが上書きされます。

js / events.js

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;

上記の例では、 `+ button `クリックはアラートのみを表示し、 ` alert()`コードがプロパティに最後に追加されたので、 ` p +`テキストを変更しません。

image:https://assets.digitalocean.com/articles/eng_javascript/dom/events-5.png [events.htmlのイベントハンドラーによる最終応答]

インラインイベントハンドラーとイベントハンドラープロパティの両方を理解したら、イベントリスナーに移りましょう。

イベントリスナー

JavaScriptイベントハンドラーへの最新の追加はイベントリスナーです。 *イベントリスナー*は、要素のイベントを監視します。 イベントを要素のプロパティに直接割り当てる代わりに、 `+ addEventListener()+`メソッドを使用してイベントをリッスンします。

`+ addEventListener()+`は2つの必須パラメーターを取ります-リスニングするイベントとリスナーコールバック関数です。

イベントリスナーのHTMLは、前の例と同じになります。

events.html

...
   <button>Click me</button>

   <p>I will change.</p>
...

以前と同じ `+ changeText()`関数を引き続き使用します。 ボタンに ` addEventListener()+`メソッドをアタッチします。

js / events.js

// 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);

最初の2つのメソッドでは、クリックイベントは「+ onclick 」と呼ばれていましたが、イベントリスナーでは「 click 」と呼ばれます。 すべてのイベントリスナーは、単語から「 on +」を削除します。 次のセクションでは、他のタイプのイベントのより多くの例を見ていきます。

上記のJavaScriptコードでページをリロードすると、次の出力が表示されます。

image:https://assets.digitalocean.com/articles/eng_javascript/dom/events-6.png [events.htmlのイベントリスナーの応答]

一見、イベントリスナーはイベントハンドラープロパティに非常によく似ていますが、いくつかの利点があります。 次の例に示すように、同じ要素に複数のイベントリスナーを設定できます。

js / events.js

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);

この例では、両方のイベントが発生し、ユーザーがアラートをクリックすると、アラートと変更されたテキストの両方が提供されます。

多くの場合、イベントリスナーの関数参照の代わりに匿名関数が使用されます。 無名関数は、名前が付けられていない関数です。

// An anonymous function on an event listener
button.addEventListener('click', () => {
   p.textContent = "Will I change?";
});

`+ removeEventListener()+`関数を使用して、要素から1つまたはすべてのイベントを削除することもできます。

// Remove alert function from button element
button.removeEventListener('click', alertText);

さらに、 + document`および + window`オブジェクトで `+ addEventListener()+`を使用できます。

現在、イベントリスナは、JavaScriptでイベントを処理する最も一般的で推奨される方法です。

一般的なイベント

クリックイベントを使用して、インラインイベントハンドラー、イベントハンドラープロパティ、およびイベントリスナーについて学習しましたが、JavaScriptにはさらに多くのイベントがあります。 以下では、最も一般的なイベントのいくつかについて説明します。

マウスイベント

マウスイベントは、最も頻繁に使用されるイベントの1つです。 これらは、マウスのボタンをクリックするか、マウスポインターをホバーして移動するイベントを指します。 これらのイベントは、タッチデバイスでの同等のアクションにも対応しています。

Event Description

click

Fires when the mouse is pressed and released on an element

dblclick

Fires when an element is clicked twice

mouseenter

Fires when a pointer enters an element

mouseleave

Fires when a pointer leaves an element

mousemove

Fires every time a pointer moves inside an element

「+ click 」は、「 mousedown 」イベントと「 mouseup +」イベントを組み合わせた複合イベントで、それぞれマウスボタンが押されたときまたは持ち上げられたときに発生します。

タンデムで「+ mouseenter 」と「 mouseleave +」を使用すると、マウスポインターが要素上にある限り持続するホバー効果が再作成されます。

フォームイベント

フォームイベントは、 `+ input +`要素が選択または選択解除され、フォームが送信されるなど、フォームに関連するアクションです。

Event Description

submit

Fires when a form is submitted

focus

Fires when an element (such as an input) receives focus

blur

Fires when an element loses focus

_Focus_は、たとえば、マウスのクリックや、 `+ TAB +`キーを介してその要素に移動するなどして、要素が選択されたときに実現されます。

JavaScriptは、多くの場合、フォームを送信し、値をバックエンド言語に送信するために使用されます。 JavaScriptを使用してフォームを送信する利点は、フォームを送信するためにページをリロードする必要がなく、JavaScriptを使用して必要な入力フィールドを検証できることです。

キーボードイベント

キーボードイベントは、キーを押す、キーを持ち上げる、キーを押すなどのキーボードアクションを処理するために使用されます。

Event Description

keydown

Fires once when a key is pressed

keyup

Fires once when a key is released

keypress

Fires continuously while a key is pressed

見た目は似ていますが、 `+ keydown `および ` keypress `イベントはまったく同じキーにアクセスしません。 「 keydown 」は押されたすべてのキーを認識しますが、「 keypress 」は「 SHIFT 」、「 ALT 」、「 DELETE +」などの文字を生成しないキーを省略します。

キーボードイベントには、個々のキーにアクセスするための特定のプロパティがあります。

`+ event `オブジェクトと呼ばれるパラメーターがイベントリスナーに渡されると、発生したアクションに関する詳細情報にアクセスできます。 キーボードオブジェクトに関連する3つのプロパティには、「 keyCode」、「+ key」、および「+ code」があります。

たとえば、ユーザーがキーボードの文字「+ a +」キーを押すと、そのキーに関連する次のプロパティが表示されます。

Property Description Example

keyCode

A number pertaining to the key

65

key

Represents the character name

a

code

Represents the physical key being pressed

KeyA

JavaScriptコンソールを介してその情報を収集する方法を示すために、次のコード行を記述できます。

// 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);
});

コンソールで「+ ENTER」を押すと、キーボードのキーを押すことができます。この例では、「+ a +」を押します。

OutputkeyCode: 65
key: a
code: KeyA

`+ keyCode `プロパティは、押されたキーに関連する番号です。 ` key `プロパティは変更可能な文字の名前です。たとえば、 ` SHIFT `で ` a `を押すと ` A `の ` key `になります。 ` code +`プロパティはキーボードの物理キーを表します。

詳細については、https://developer.mozilla.org/en-US/docs/Web/Events [Mozilla Developer Networkのイベントの完全なリスト]をご覧ください。

イベントオブジェクト

`+ Event `オブジェクトは、すべてのイベントがアクセスできるプロパティとメソッドで構成されています。 汎用の「 Event 」オブジェクトに加えて、各タイプのイベントには「 KeyboardEvent」や「+ MouseEvent」などの独自の拡張機能があります。

`+ Event `オブジェクトは、リスナー関数を介してパラメーターとして渡されます。 通常は、「 event 」または「 e 」と記述されます。 ` keydown `イベントの ` code +`プロパティにアクセスして、PCゲームのキーボードコントロールを複製できます。

試してみるには、 `+ <p> +`タグを使用して基本的なHTMLファイルを作成し、ブラウザーにロードします。

event-test-p.html

<!DOCTYPE html>
<html lang="en-US">
<head>
   <title>Events</title>
</head>
<body>

 <p></p>

</body>
</html>

次に、ブラウザのhttps://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console [開発者コンソール]に次の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;
   }
});

「+ a 」、「 s 」、「 d 」、または「 w +」のいずれかのキーを押すと、次のような出力が表示されます。

image:https://assets.digitalocean.com/articles/eng_javascript/dom/events-7.png [最初のイベントオブジェクトの例]

ここから、ブラウザがどのように応答し、ユーザーがそれらのキーを押すかに対する開発を続け、より動的なWebサイトを作成できます。

次に、最も頻繁に使用されるイベントプロパティの1つである + target +`プロパティについて説明します。 次の例では、1つの `+ section`内に3つの + div`要素があります。

event-test-div.html

<!DOCTYPE html>
<html lang="en-US">
<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>

ブラウザのデベロッパーコンソールでJavaScriptとともに + event.target`を使用すると、1つのイベントリスナーを外側の + section of`要素に配置して、最も深くネストされた要素を取得できます。

const section = document.querySelector('section');

// Print the selected target
section.addEventListener('click', event => {
   console.log(event.target);
});

これらの要素のいずれかをクリックすると、 `+ event.target +`を使用して、関連する特定の要素の出力がコンソールに返されます。 これは、多くのネストされた要素にアクセスするために使用できるイベントリスナーを1つだけ配置できるため、非常に便利です。

image:https://assets.digitalocean.com/articles/eng_javascript/dom/events-8.png [2番目のイベントオブジェクトの例]

`+ Event +`オブジェクトを使用すると、一般的なイベントやより具体的な拡張機能など、すべてのイベントに関連する応答を設定できます。

結論

イベントは、クリック、ホバリング、フォームの送信、ページのロード、キーボードのキーの押下など、Webサイトで発生するアクションです。 ユーザーが行ったアクションにWebサイトを応答させることができると、JavaScriptは真にインタラクティブで動的になります。

このチュートリアルでは、イベントとは何か、一般的なイベントの例、イベントハンドラーとイベントリスナーの違い、 `+ Event +`オブジェクトへのアクセス方法を学びました。 この知識を使用して、動的なWebサイトおよびアプリケーションの作成を開始できます。