初心者による DOM イベントを使った処理

概要

ブラウザ上では、さまざまなイベントが発生します。クライアントサイドのjavascriptでは、それらのイベントに応じて処理をします。これをイベント駆動型モデルという。

イベント一覧

javascriptがキャッチするイベントを一覧にしてみる

読み込み関係

abort : 画像の読み込みを中断した時
load : ページ/画像の読み込みが終了した時
unload : ほかのページに移動するとき

マウス関係

click : クリック時
dbclick : ダブルクリック時
mousedown : マウスボタンを押したとき
mouseup : マウスボタンを離したとき
moousemove : マウスポインターが移動した時
mouseover : マウスポインターが要素に乗った時
mouseout : マウスポインターが要素から外れた時
mouseenter : マウスポインターが要素に乗った時
mouseleave : マウスポインターが要素から外れた時
contextmenu : コンテキストメニューが表示される前

要素がネストしている場合に注意！
mouseover/mouseroutは親要素から子要素への出入りで反応する。
mouseenter/mouseleaveは親要素から出ない限り反応しない。

キー関係

keydown : キーを押した時
keypass : キーを押している時
keyup : キーを離した時

フォーム関係

change : 内容が変更されたとき
reset : リセットボタンが押されたとき
submit : サブミットボタンが押されたとき

その他

resize : 要素のサイズを変更した時
scroll : スクロールした時

イベントドリブンモデル(イベント駆動型モデル)

イベント駆動型モデルをなすためには、

1. どの要素で発生したのか
2. どのイベントが発生したのか
3. どのハンドラー/リスナーに関連付けるか

を定義しておく必要がある。
javascriptでは3の関連付けを行うために以下の方法を提供している。

1. タグ内の属性として宣言する
2. 要素オブジェクトのプロパティとして宣言する
3. addEventListenerメソッドを使う

タグ内の属性として宣言する

一番シンプルな実装方法。宣言方法は

<タグ名 onイベント名="Javascriptのコード" />

となる。一般的にはコードを直接書くのではなく関数を別で定義して呼び出す形となる。

sample.html

<input type="text" value="" onClick="on_click()" />

sample.js

function on_click() {
 alert('クリックされました！')
}

なるべく、htmlファイルとjsファイルで分けたほうが良い。

要素オブジェクトのプロパティとして宣言する

htmlファイルには一切書かず、jsファイルで設定する方法。

sample.js

obj.onEvent = function() {
 //コード
}
 //obj : windowオブジェクトもしくは要素オブジェクト
 //Event : イベント名

obj.onEvent = func
 //func : 関数の定義はべつにしてある場合

関数の定義をその場でするか、別にしてあるかの違いで二種類の書き方がある。

sample.html

<button id="btn" value="">ボタン</button>

sample.js

//windowがロードされたときにイベントハンドラーを定義
window.onload = function() {
 document.getElementById("btn").onclick = function() {
  window.alert("ボタンがクリックされました！")
 }
}

この書き方には注意点が３つある。
１つ目は、onClickのようにイベント名を大文字にするのではなく、onclickのように小文字にする必要があるということ。
２つ目は、プロパティとして登録するのは関数オブジェクトである必要があるため、window.load = get のように関数呼び出しにしてはいけない。
３つ目は、要素を取得する場合、window.loadの配下ではないといけない。ページが読み込まれる前に探してしまう場合がある。

addEventListeneメソッドで宣言する

onClickのようなイベントハンドラーでは、「同一の要素/同一のイベントに対して複数のイベントハンドラーを紐づけられない」という問題があります。
ここで登場するのが、イベントリスナーです。イベントリスナーは「同一要素の同一イベントに対して、複数のイベントハンドラーを紐づけできるイベントハンドラー」です。
イベントリスナーを登録するのは、addEventListenerの役割です。

sample.js

elem.getElementById(type, listener, capture)
 //elem : 要素オブジェクト type : エベントの種類
 //listener : イベントに対して実行すべき処理
 //capture : イベントの方向

で実装することができる。

sample.html

<input id="btn" type="button" value="ダイアログ表示" />

sample.js

//ページがロードされたタイミングで処理しなさい
document.addEventListener('DOMContentLoad', function() {
 document.getElementById('btn').addEventListener('click', function() {
  window.alert('ボタンがクリックされました')
 }, false)
}, false)

ここで使われている、onloadイベントハンドラーはコンテンツ本体とすべての画像がロードされたところで実行、DOMContentLoadedイベントリスナーはコンテンツ本体がロードされたところで実行、という違いがある。
画像が使われているというような特別な理由がない限り、DOMContentLoadedイベントリスナーで表すのが基本となっている。

参考資料

山田祥寛様　「javascript本格入門」