イベントハンドラ属性

Web Hypertext Application Technology Working Group

イベントハンドラ属性一覧

＊イベントハンドラ属性とは、属性値に記述したJavaScritのコードを閲覧者の操作に捜査に合わせて実行する属性にになる。JavaScriptでは、下記の属性の他にも、たくさんのイベントハンドラ属性が用意されています。

すべてのHTML要素で使用できる属性になります。

属性名	説明
onclick	クリック時の処理を指定する「クリックされた」というイベントに対して、この属性値に指定された処理を行う。
onunload	ページ遷移時の処理を指定する「他のページへの移動時、またはページを閉じた時」というイベントに対して、この属性値に指定された処理を行う。
onstorage	DOM Storage 変更時の処理を指定する「DOM Storage に対する変更」というイベントに対して、この属性値に指定された処理を行う。
onscroll	スクロール時のイベントを指定する「ページをスクロールした」というイベントに対して、この属性値に指定された処理を行う。
onresize	ウィンドウサイズ変更時の処理を指定する「ウィンドウサイズの変更」というイベントに対して、この属性値に指定された処理を行う。
onpopstate	履歴による再表示時の処理を指定する「セッション履歴による再表示」というイベントに対して、この属性値に指定された処理を行います。
onpageshow	ページ表示時の処理を指定する「ページを表示した」というイベントに対して、この属性値に指定された処理を行います。ページを表示したとは、ブラウザの戻る、進むなどでページの再読込を行わずに、キャッシュから表示した場合などが当てはまる。
onpagehide	ページ非表示時の処理を指定する「ページを非表示にした」というイベントに対して、この属性値に指定された処理を行います。ページを非表示にしたとは、他のページに移動した場合などが当てはまる。
ononline	オンライン時の処理を指定する「オンラインになった」というイベントに対して、この属性値に指定された処理を行う。
onoffline	オフライン時の処理を指定する「オフラインになった」というイベントに対して、この属性値に指定された処理を行う。
onmessage	メッセージ受信時の処理を指定する「API からメッセージを受け取った」というイベントに対して、この属性値に指定された処理を行う。
onload	文書読み込み完了時の処理を指定する「文書の読み込みが完了した」というイベントに対して、この属性値に指定された処理を行う。
onhashchange	location.hash 変更時の処理を指定する「location.hash が変更された」というイベントに対して、この属性値に指定された処理を行います。location.hash の変更とは、フラグメント識別子によるアンカーリンクの移動を指す。
onfocus	フォーカス時の処理を指定する「該当要素にフォーカスが当たった」というイベントに対して、この属性値に指定された処理を行う。
onerror	エラー発生時の処理を指定する「エラー発生時」というイベントに対して、この属性値に指定された処理を行う。
onblur	フォーカスが外れた際の処理を指定する「該当要素からフォーカスが外れた」というイベントに対して、この属性値に指定された処理を行う。
onbeforeunload	ページ遷移前の処理を指定する「他のページへの移動前、またはページを閉じる前」というイベントに対して、この属性値に指定された処理を行う。
onbeforeprint	印刷開始前の処理を指定する「印刷が開始される前」というイベントに対して、この属性値に指定された処理を行う。
onafterprint	印刷終了時の処理を指定する「印刷が終了した」というイベントに対して、この属性値に指定された処理を行います。

onclick属性の使用例

html（index.html）ファイル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
     JavaScript
     <!-- イベントハンドラを設定 -->
     <button onclick="clickAlert()">クリック</button>
     <script type="text/javascript" src="sample.js"></script>
  </body>
</html>

js（sample.js）ファイル

function clickAlert() {
    alert("クリックされました");
  }

下記のonclick.htmlをクリックすると、onclick Eventボタンが表示されます。ボタンをクリックするとダイアログボックが表示されます。ダイアログを閉じるには、OKをクリックするか、キーボードのescキーをクリックしてください。

記事

イベントハンドラ属性一覧