はじめに
JavaScript入門講座の第十弾として、JavaScript イベントハンドラを初心者向きに解説、onClick、複数、引数、中止などついて紹介します。
この記事を読むと次の疑問について知ることができます。
- イベントハンドラとは？
- イベントハンドラの種類には何があるの？
- onClick
- 基本的な使い方
- 関数の複数指定
- ボタンにより異なる処理（引数の引き渡し）
- イベントの中止
JavaScript入門講座（9）では、JavaScript 正規表現を初心者向きに解説、match、replace、search、split、testメソッドなどについて解説してきました。
ここでは、JavaScript イベントハンドラを初心者向きに解説、onClick、複数、引数、中止などについて深堀していきます。
イベントハンドラとは？
イベントハンドラは、あなたがブラウザーを操作してクリック操作、マウスを画像に重ねる、何かを入力するなどの操作をするとブラウザーでは、クリックしたな！、マウスを画像に重ねたな！、何かを入力したな？という（画面操作）イベントを感知して、それらイベントに対してて処理をするプログラムを書くことができ、この処理をイベントハンドラと呼んでいます。
イベントハンドラの種類
それでは、どのようなイベントハンドラが用意されているか見てみましょう。
| イベントハンドラ | 処理の対象 | 処理 |
| onBlur | フォーカス | ページやフォーム要素からフォーカスが外れた時に処理 |
| onFocus | フォーカス | ページやフォーム要素にフォーカスが当たった時に処理 |
| onChange | フォーカス | フォーム要素の選択、入力内容が変更された時に処理 |
| onSelect | フォーム | テキストが選択された時に処理 |
| onSubmit | フォーム | フォームを送信しようとした時に処理 |
| onReset | フォーム | フォームがリセットされた時に処理 |
| oninput | フォーム | フォームに値が入力された時に処理 |
| onAbort | 画像 | 画像の読み込みを中断した時に処理 |
| onError | 画像 | 画像の読み込み中にエラーが発生した時に処理 |
| onLoad | 操作 | ページや画像の読み込みが完了した時に処理 |
| onUnload | 操作 |
ウィンドウを閉じた時、他のページに切り替えた時、ページをリロード（更新）した時に処理
|
| onClick | マウス | 要素やリンクをクリックした時に処理 |
| onDblClick | マウス | 要素をダブルクリックした時に処理 |
| onMouseOut | マウス | マウスが離れたした時に処理 |
| onMouseOver | マウス | マウス乗った時に処理 |
| onMouseUp | マウス | クリックしたマウスを上げた時に処理 |
| onMouseDown | マウス | マウスでクリックした時に処理 |
| onMouseMove | マウス | マウスを動かしている時に処理 |
| onKeyUp | キーボード | 押していたキーをあげた時に処理 |
| onKeyDown | キーボード | キーを押した時に処理 |
| onKeyPress | キーボード | キーを押してる時に処理 |
ここでは、実際に上述の onClick を用いていろいろ紹介していきます。
onClick
基本的な使い方
HTMLの要素、リンク、ボタンなどがクリックされた際に処理をさせるイベントバンドラです。
ここでは、簡単な onClick を用いたイベントハンドラを組んでみました。
関数の複数指定
前述では、関数にアラートを用事させる関数のみでしたが、複数指定することも可能です。
ボタンにより異なる処理（引数の引き渡し）
ボタンを２つ用意し、ボタンによって実行させる関数をそれぞれ用意し、引数を渡して、それぞれに違ったことを実行できるようになります。
イベントの中止
onclick属性に「retuen false」を指定すると、イベントを中断できます。
おわりに
如何だったでしょうか？
イベントハンドラとは？、イベントハンドラの種類には何があるの？、onClick、基本的な使い方、関数の複数指定、ボタンにより異なる処理（引数の引き渡し）、イベントの中止などについて紹介してきました。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント