JavaScriptは、「イベント駆動（イベントトリブン）」という考え方が非常に重要になります。
イベント駆動において重要な概念として、「イベントハンドラ」や「イベントリスナ」という技術があります。
JavaScriptだけでなく、Android等結構多くのプログラミング言語で扱っている概念なので、一度学習すると広く生かせます。
イベントハンドラとは？
発生したイベントを捕まえる機能のこと。
一つのイベントに対して、必ず一つのイベントハンドラが対応しています。
| イベント | 対応するイベントハンドラ | 動作タイミング | 対応するタグ |
|---|---|---|---|
| click | onclick | クリック | ほぼ全てのタグ |
| load | onload | ロードされた時 | body |
| blur | onblur | フォーカスが離れた時 | input等 |
| mouseover | onmouseover | マウスオーバー（ロールオーバー）した時 |
イベントハンドラの記述方法
HTMLタグに記述する方法
直接、ボタンにイベントハンドラを設定します。ボタンをクリックするとstart関数が呼び出されます。
|
1 |
<input type="button" value="ボタン" onclick="start()" /> |
プログラムで設定する方法
下記のように記述すると、documentのform要素の、ボタン要素をクリックするとstart関数を呼び出せます。
|
1 |
document.form.btn.onclick=start; |
実務でよく見かけるのは、やはり、前者の「HTMLタグに直接記述する方法」でしょうね。
イベントリスナとは？
同じイベントに対して複数登録できる機能のこと。
イベントハンドラの場合は、一つのイベントに対して、必ず一つのイベントハンドラが対応していましたが、イベントリスナの場合は、一つのイベントに対して、複数結びつけるものです。
実際に使ってみる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>挨拶テスト</title> </head> <body> <input id="aisatu" type="button" value="挨拶" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script> $(function(){ function hello(){ console.log('こんにちは！'); } function goodEvening(){ console.log('こんばんわ！!'); } var p = document.getElementById('aisatu'); p.addEventListener('click', hello, false); p.addEventListener('click', goodEvening, false); }); </script> </body> </html> |
なお、addEventListenerに渡している引数のメソッド（hello、goodEvening）はコールバック関数（引数に渡して実行してくれる関数のこと）になります。
上記を実行すると、下記のようにコンソールに、二つの関数の結果が出力されています。
通常、「click」イベントには、一つのイベントハンドラしか結び付けられませんでしたが、「addEventListener」を使うことで、複数の関数を紐づけて実行することができました。
なお、注意点としては、「getElementById」は、対象の要素（今回の場合で言えば、aisatuボタン）の読み込みんだ後にJavaScriptを記述しないと、要素が存在しないエラーになってしまうので注意です。もしくは、jQueryの「$(function(){…});」（ページ読み込み完了後に実行する）を使いましょう。
thisについて
イベントリスナー配下では、thisはイベントの発生元を表します。
なので、イベントリスナ配下で変数を利用しようとしてもエラーになる場合があります。
その不都合を解消するのが、「Functionオブジェクト」の「bindメソッド」になります。
bindメソッド
関数配下のthisが引数に紐付けられます。
この記事へのコメントはありません。