Understanding Events in JavaScript

投稿日: 2019-11-08 2022-04-20
タグ: Development, javascript

序章

DOM シリーズについては、 DOMツリーと、アクセス、トラバース、追加および削除の方法について説明しました。、および Developer ToolsConsoleを使用してノードと要素を変更します。

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

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

ページの読み込みが終了します
ユーザーがボタンをクリックする
ユーザーがドロップダウンにカーソルを合わせる
ユーザーがフォームを送信する
ユーザーがキーボードのキーを押す

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

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

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

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

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

イベントリスナーは、レスポンシブインターフェイスを要素に接続します。これにより、その特定の要素は、特定のイベントが発生するのを待機して「リッスン」できます。

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

インラインイベントハンドラー
イベントハンドラのプロパティ
イベントリスナー

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

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

イベントハンドラーについて学び始めるために、まずインラインイベントハンドラーについて検討します。 button要素とp要素で構成される非常に基本的な例から始めましょう。 buttonをクリックして、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>

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

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

First rendering of events.html

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

First response to event on events.html rendering

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

インラインイベントハンドラーを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;

注：イベントハンドラーは、ほとんどのJavaScriptコードが準拠しているcamelCase規則に準拠していません。コードがonClickではなくonclickであることに注意してください。

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

Initial load of events.html with events handler

これで、ボタンをクリックすると、以前と同様の効果があります。

Response with events handler of 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;

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

Final response via events handler of 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コードを使用してページをリロードすると、次の出力が表示されます。

Event listener response of 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つです。これらは、マウスのボタンをクリックするか、マウスポインタをホバーして移動することを含むイベントを指します。これらのイベントは、タッチデバイスでの同等のアクションにも対応しています。

イベント	説明
`click`	要素上でマウスを押して離すと発生します
`dblclick`	要素が2回クリックされると発生します
`mouseenter`	ポインタが要素に入ると発生します
`mouseleave`	ポインタが要素を離れたときに発生します
`mousemove`	ポインタが要素内を移動するたびに発生します

clickは、mousedownイベントとmouseupイベントの組み合わせで構成される複合イベントであり、それぞれマウスボタンを押したり離したりすると発生します。

mouseenterとmouseleaveを組み合わせて使用すると、マウスポインターが要素上にある限り、ホバー効果が持続します。

フォームイベント

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

イベント	説明
`submit`	フォームが送信されると発生します
`focus`	要素（入力など）がフォーカスを受け取ったときに発生します
`blur`	要素がフォーカスを失ったときに発生します

Focus は、要素が選択されたときに達成されます。たとえば、マウスをクリックするか、TABキーを使用して要素に移動します。

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

キーボードイベント

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

イベント	説明
`keydown`	キーを押すと1回発火
`keyup`	キーを離すと1回発火します
`keypress`	キーを押している間、連続して発火します

見た目は似ていますが、keydownイベントとkeypressイベントは、まったく同じキーすべてにアクセスするわけではありません。 keydownは押されたすべてのキーを確認しますが、keypressは、SHIFT、ALT、DELETE。

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

eventオブジェクトと呼ばれるパラメーターがイベントリスナーに渡されると、実行されたアクションに関する詳細情報にアクセスできます。キーボードオブジェクトに関連する2つのプロパティには、keyとcodeがあります。

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

財産	説明	例
`key`	キャラクター名を表します	a
`code`	押されている物理キーを表します	KeyA

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

// Test the key and code properties
document.addEventListener('keydown', event => {
	console.log('key: ' + event.key);
	console.log('code: ' + event.code);
});

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

Outputkey: a
code: KeyA

keyプロパティは文字の名前であり、変更できます。たとえば、aをSHIFTと一緒に押すと、keyがA。 codeプロパティは、キーボードの物理キーを表します。

詳細については、Mozilla DeveloperNetworkのイベントの完全なリストを表示できます。

イベントオブジェクト

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>

次に、ブラウザの DeveloperConsoleに次の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のいずれかのキーを押すと、次のような出力が表示されます。

First event object example

ここから、ブラウザがどのように応答し、ユーザーがそれらのキーを押したのかを開発し続けることができ、より動的な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を使用すると、外側のsection要素に1つのイベントリスナーを配置して、最も深くネストされた要素を取得できます。

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

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

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

Second event object example

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

結論

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

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

getdocs

13036