Javasriptにおいてのイベントハンドラは現在あまり使われなくなってしまいました。というのは、HTMLタグに直接埋め込むという意味では開発段階での簡単なテストとしては利用価値があっても大規模なスクリプトを組む際にはこれらの汎用性が逆に煩雑さを生んでデバックがしづらいという問題があります。
ですが、Javascriptを学ぶ上では一応知っておいた方がよいかも...という塩梅です。イベントハンドラを埋め込んでおいて関数でほい！と呼び出すというような旧来の技もそれはそれで使いどころがあります。
イベントハンドラについて私は長年全く意味がわからなかったのですが、よくよく調べてみるとそのイベントハンドラの動作は元々のタグの動作と連動しているということでそれぞれのタグに固有のイベントハンドラがあるということなんですね。onSubmitやonResetなんていうハンドラは<form onSubmit="" ... />と<form onReset="" ... />でのみしか使用できないわけでして全然汎用的じゃない。ピンポイントの使いどころじゃないと機能しないわけなんです。プログラム言語というものは元々広範囲な汎用性があって時折特殊な制限があるぐらいに思っていたらこのイベントハンドラに関してはとてつもない誤解ということになります。だいたいonRestなんて「すべての値をクリアしてもよろしいですか？」というようなアラートを出すとかその類の警告をwindow.openでもって何らかのメッセージを流す...という以外に使い方はあるのだろか？と思われるほど使い道が狭い。
そんなわけなのでどこにどのイベントハンドラを使うのかを暗記するというのがこのイベントハンドラを使えるようにする唯一のコツです。
ですが、Javascriptを学ぶ上では一応知っておいた方がよいかも...という塩梅です。イベントハンドラを埋め込んでおいて関数でほい！と呼び出すというような旧来の技もそれはそれで使いどころがあります。
| ハンドラ名 | 内容 | 利用可能な場所 |
|---|---|---|
| onBlur | フォームがフォーカスを失う際に起動。onFocusと併用して使用する場合が多くあります。 | select、text、textarea |
| onChange | フォームの内容が変更され、フォーカスを失った際に起動。onBlurと似た挙動をしますが内容が変更された時のみ起動します。 | select、text、textarea |
| onClick | フォームがクリックされた際に起動 | button、checkbox、radio、link、reset、submit |
| onFocus | フォームがフォーカスされた際に起動。onBlurと共に使用する場合が多くあります。 | select、text、textarea |
| onLoad | ページがロードされた際に起動。onUnLoadと共に使用する場合が多くあります。 | body要素内で定義する |
| onMouseOver | マウスカーソルが重なった際に起動 | link |
| onSelect | フォーム内でテキストが選択された際に起動 | text、textarea |
| onSubmit | submit（提出）された際に起動 | form |
| onRest | reset（取り消し）された際に起動 | form |
| onUnload | ページがアンロードされた際に起動 | body要素内で定義する |
そんなわけなのでどこにどのイベントハンドラを使うのかを暗記するというのがこのイベントハンドラを使えるようにする唯一のコツです。
DOMとイベントモデル
DOMというのが最近ありまして、最近でもないんですが時代的にはxmlとhtmlが統合されxhtmlというような構造体を持ったころにcssはその構造体を装飾するといった独立した機能になりました。時を同じくしてJavascriptもhtmlタグの中に直接埋め込むというような仕様をやめて、DOM(Document Object Model)という風にタグから一切のJavascriptの呼び出しをやめhtmlタグのidやclassからイベントハンドラを関連付けられるようになりました。これをイベント・オブジェクト・モデルとか、イベント・モデルとか言うようになりました。用語は今も混乱中でこれらも含めてドキュメント・オブジェクト・モデル（つまり、DOM）という風に言ったりといろいろです。しかし、だいたいが同じ流行りの中にあるので理解ができると思います。要するに(x)htmlファイル（xxx.html）、CSSファイル（xxx.css）、Javascriptファイル（xxx.js）がすべて独立した一つのファイルとして書くことができて、それらをリンクなどで呼び出して使うというような潮流です。ちなみに旧来の書き方（HTMLファイルの中にごちゃ混ぜに書いちゃう）という方法も機能しないわけではありませんが、W3Cはそういうスマートじゃない書き方をやめたくて仕方がないようです。難しげな本にはそういう旧来の書き方はもう書くべきではありません！ぐらいに「...である」調で連発されますが、さほど重要なことではないみたいです。(しかしながら、DOMはなかなか便利です。)<div id="attention" onClick="javascript:alert('Clicked !')">ご注意</div>
...この二つの書き方は同じ動作をしてくれます。二つ目の方はJavascriptがhtmlタグから完全に独立した形になっているのでhtmlタグが非常に見やすくなっています。しかし、これはDOMではありません。イベントハンドラを単にhtmlから切り離しただけなんです。切り離しただけでいいんじゃないか？と思われるかもしれませんが、イベントハンドラは同じハンドラに複数の関数を与えてしまうと一番最後に与えた関数のみを実行してしまうという欠点があります。というわけでイベントハンドラはちょっと古い！というような時代になってきています。
<head>
<script type="text/javascript">
<!--
window.onload = function() {
var attention = document.getElementById('attention');
attention.onClick = function () {
alert("Clicked !");
}
}
-->
</script>
<head>
<body>
<div id="attention">ご注意</div>
</body>
...
