JavaScriptでのイベントの理解
序章
DOM シリーズについては、 DOMツリーと、アクセス、トラバース、追加と削除の方法について説明しました。 、および how-to-modify-attributes-classes-and-styles-in-the-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
を最初にロードすると、次のようなページが表示されます。
ただし、自分または別のユーザーがボタンをクリックすると、p
タグのテキストがTry to change me.
からI changed because of an inline event handler.
に変わります。
インラインイベントハンドラーは、イベントの理解を開始するための簡単な方法ですが、通常、テストや教育目的以外では使用しないでください。
インラインイベントハンドラーを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
であることに注意してください。
最初にページをロードすると、ブラウザに次のように表示されます。
これで、ボタンをクリックすると、以前と同様の効果があります。
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
テキストは変更しません。
インラインイベントハンドラーとイベントハンドラーのプロパティの両方を理解した上で、イベントリスナーに移りましょう。
イベントリスナー
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コードを使用してページをリロードすると、次の出力が表示されます。
一見、イベントリスナーはイベントハンドラのプロパティに非常に似ているように見えますが、いくつかの利点があります。 次の例に示すように、同じ要素に複数のイベントリスナーを設定できます。
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
のいずれかのキーを押すと、次のような出力が表示されます。
ここから、ブラウザがどのように応答し、ユーザーがそれらのキーを押したのかを開発し続けることができ、より動的な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つだけ配置できるため、非常に便利です。
Event
オブジェクトを使用すると、一般的なイベントやより具体的な拡張機能など、すべてのイベントに関連する応答を設定できます。
結論
イベントは、クリック、ホバー、フォームの送信、ページの読み込み、キーボードのキーの押下など、Webサイトで発生するアクションです。 ユーザーが行ったアクションにWebサイトを応答させることができると、JavaScriptは真にインタラクティブで動的になります。
このチュートリアルでは、イベントとは何か、一般的なイベントの例、イベントハンドラーとイベントリスナーの違い、およびEvent
オブジェクトへのアクセス方法を学習しました。 この知識を使用して、動的なWebサイトとアプリケーションの作成を開始できます。