JavaScriptのイベント

HTMLイベントは、HTML要素上で発生する「こと」です。

HTMLページでJavaScriptを使用する場合、JavaScriptはこれらのイベントに「対応」できます。

HTMLイベント

HTMLイベントは、ブラウザやユーザーが行った何かです。

以下はHTMLイベントのいくつかの例です：

  • HTMLウェブページが読み込まれました
  • HTML入力フィールドが変更されました
  • HTMLボタンがクリックされました

通常、イベントが発生したときには、ユーザーが何かを行いたいと思っています。

JavaScriptでは、イベントが検出されたときにコードを実行することができます。

JavaScriptコードを通じて、HTMLではHTML要素にイベントハンドラを追加することができます。

シングルクォートを使用して：

<element event='いくつかのJavaScript>

ダブルクォートを使用して：

<element event="いくつかのJavaScript">

次の例では、onclick 属性（およびコード）が追加されました <button> 要素：

例

<button onclick='document.getElementById("demo").innerHTML=Date()'>今の時間は何時ですか？</button>

自分で試してみてください

上の例では、JavaScriptコードがid="demo"の要素の内容を変更しました。

次の例では、コード（使用 this.innerHTML）は、自身の要素の内容を変更しました：

例

<button onclick="this.innerHTML=Date()">今の時間は何時ですか？</button>

自分で試してみてください

JavaScriptコードは通常、多くの行があります。イベント属性で関数を呼び出すことがよくあります：

例

<button onclick="displayDate()">今の時間は何時ですか？</button>

自分で試してみてください

一般的なHTMLイベント

以下は、一般的なHTMLイベントの一部です：

イベント 説明
onchange HTML要素が変更されました
onclick ユーザーが HTML 要素をクリックしました
onmouseover ユーザーが HTML 要素にマウスを合わせました
onmouseout ユーザーが HTML 要素からマウスを外しました
onkeydown ユーザーがキーボードのボタンを押しました
onload ブラウザがページの読み込みを完了しました

もっと完全なリスト：CodeW3C.com JavaScript リファレンスマニュアル HTML DOM イベント。

JavaScript ができること

イベントハンドラはユーザー入力の処理、検証、ユーザーアクション、ブラウザアクションを処理するために使用できます：

  • ページが読み込まれたときにするべきこと
  • ページが閉じられたときにするべきこと
  • ユーザーがボタンをクリックしたときに実行されるアクション
  • ユーザーがデータを入力したときに検証すべき内容
  • など

JavaScript でイベントを処理する方法はたくさんあります：

  • HTML イベント属性は JavaScript コードを実行できます。
  • HTML イベント属性は JavaScript ファンクションを呼び出すことができます。
  • 自分自身のイベントハンドラを HTML 要素に割り当てることができます。
  • イベントが送信されたり処理されたりするのを阻止することができます。
  • など

HTML DOM 章節で学ぶイベントとイベントハンドラの知識についてもっと詳しく説明します。