JavaScript イベント

HTML イベントは HTML 要素上で発生する事柄です。

HTML ページで JavaScript を使用するとき、JavaScript はこれらのイベントをトリガーできます。

HTML イベント

HTML イベントはブラウザの動作にも、ユーザーの操作にもなり得ます。

以下は HTML イベントの例です：

  • HTML ページの読み込みが完了したとき
  • HTML input フィールドが変更されたとき
  • HTML ボタンがクリックされたとき

通常、イベントが発生したときに、何かを行うことができます。

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

HTML 要素にはイベント属性を追加でき、JavaScript コードを使用して HTML 要素に追加します。

シングルクォート:

<some-HTML-element some-event='JavaScript 代码'>

ダブルクォート:

<some-HTML-element some-event="JavaScript 代码">

次の例では、ボタン要素に onclick 属性が追加されています（コードも追加）:

例

<button onclick="getElementById('demo').innerHTML=Date()">現在の時刻は?</button>

試してみる »

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

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

例

<button onclick="this.innerHTML=Date()">現在の時刻は?</button>

試してみる »

Note JavaScript コードは通常複数行です。一般的にはイベント属性を介して呼び出します：

例

<button onclick="displayDate()">現在の時刻は?</button>

試してみる »

よくあるHTMLイベント

以下はよくある HTML イベントのリストです:

イベント 説明
onchange HTML 要素の変更
onclick ユーザーが HTML 要素をクリックしたとき
onmouseover マウスポインターが指定された要素に移動したときに発生
onmouseout ユーザーが HTML 要素からマウスを離したときに発生
onkeydown ユーザーがキーボードのキーを押したとき
onload ブラウザがページの読み込みを完了したとき

その他のイベントリスト:JavaScript リファレンス - HTML DOM イベント。

JavaScript で何ができますか?

イベントはフォーム検証、ユーザー入力、ユーザー操作、ブラウザ動作の処理に使用できます:

  • ページ読み込み時にイベントをトリガー
  • ページが閉じられるときにイベントをトリガー
  • ユーザーがボタンをクリックしてアクションを実行
  • ユーザーが入力した内容の正当性を検証
  • など ...

JavaScript イベントコードを実行するには、複数の方法を使用できます：

  • HTML イベント属性は JavaScript コードを直接実行できます
  • HTML イベント属性は JavaScript 関数を呼び出すことができます
  • HTML 要素に独自のイベントハンドラを指定できます
  • イベントの発生を防ぐことができます。
  • など ...
Note HTML DOM の章では、イベントとイベントハンドラについてさらに詳しく学ぶことができます。
その他の拡張