イベント処理(1)

東京都庁を見上げると『アサシンクリード in Shinjuku』がやりたくなってきます。

あれは絶対にシンクロポイントや！

(元ネタ分からない方はごめんなさい)

というわけでみなさまどうも。

前回は関数とか引数とかお疲れ様でした。まだまだ頑張っていきましょう。

続きまして『イベント処理』というのをやっていきます。

『イベント』とはいっても世界各国の生ビール飲み放題とかアイドルさんがライブしに来るとか有名ロックミュージシャンさんが来日するとかそういった日比谷公園で良くやっているような感じの催し物のことではございません。

言語によって多少の違いがあるのですが、プログラミングにおいてのイベントとは『予め定められた特定の事象』の事を指します。んでもってその出来事が起こったときに実行させたい処理を登録できるようになっています。

JavaScriptでは『ページの読み込みが終わったとき』とか『特定の要素にマウスのカーソルを重ねたとき』などが『イベント』に該当します。

例えば『特定の要素にマウスのカーソルを重ねたとき』という『イベント』に『その要素の文字色を変更する処理』を登録しておけばマウスホバーをしたタイミングで色を変更することができます。

サンプルを作ってみたので以下にカーソルを合わせてみてください。色が変更されるのが確認できると思います。

ここにマウスのカーソルを当てる

このように『イベント』で紐付けた処理として組み込めば『マウスオーバーしたら色を変える』とか『特定の要素をクリックしたらフォントサイズが大きくなる』などといったような動的な処理を行うことができます。最近のCSSではマウスオーバーしたらデザインを変更する程度のイベント処理は実装可能になりましたが、JavaScriptではもっと幅広い処理を構築することが可能です。

では実際にイベント処理を書いてみましょう。

JavaScriptにおいてのイベント登録方法は大きく分けて二種類あります。

• HTML要素の『イベント属性』に処理を記述する方法
• 『addEventListener()関数』を使用する方法

主に使用されるのはaddEventListener()関数です。

これはHTML要素の『イベント属性』にイベント追加する方法は複数の登録ができないということと、JavaScriptはやはり外部ファイルでまとまっていた方が後のメンテナンスが楽になる、といった理由からです。

ではまずHTMLのイベント属性に処理を追加する方法から学んでいきましょう。こちらHTMLタグに直に記述する方法とJavaScript側から処理を追加する方法の2種類があります。まずはHTMLに直書きする方法からみていきましょう。

以下の例をみてください。

<p onclick="console.log('hoge');">コンソールログを実行するよ！</p>

これは『onclick』(要素がクリックされた時)に『console.log('hoge');』を実行するよう登録しています。以下にサンプルを用意してみたのでコンソール画面を開きつつクリックしてみてください。

コンソールログを実行するよ！

『"』か『'』で囲まれた『値』の部分に多少制約がありますがそのままJavaScriptを記述することが可能です。注意点として『値』の中で文字列等を使用する場合、『"』でくくられているならば『'』、『'』でくくられているならば『"』を使用しなくてはならないことに注意してください。『"』の中で『"』を使用するにはエスケープさせる必要があります。『'』も然りです。
※こちらの記事を参照

続いて『onmouseover』(要素にマウスのカーソルが重なった時)に『console.log('hoge');』を登録したい場合はこのような記述になります。

<p onmouseover="console.log('hoge');">コンソールログを実行するよ！</p>

もういっちょ以下にサンプルを用意したのでコンソール画面を開いて『コンソールログを実行するよ！』という部分にマウスを重ねてみてください。

コンソールログを実行するよ！

『onclick』が『onmouseover』に変わりましたね。このように記述方法はstyle属性に記述するとき等とほぼ同じですが、登録したいイベントによって属性部分の記述が変える必要があります。

その他、以下のようなイベント属性が存在します。

onclick	要素がクリックされたとき
ondblclick	要素がダブルクリックされたとき
onmouseover	要素の上にマウスのカーソルが重なったとき
onmouseout	要素の上からマウスのカーソルが離れたとき

これらは一般に『イベントハンドラ』と呼ばれます。HTMLに記述した『イベントハンドラ』は『イベント属性』と呼ばれたりします。『ハンドラ』とは「扱う人」とか「扱うもの」いったような意味なのですが、『イベントハンドラ』とは『そのイベントを処理するために用意されている処理群』の事を指します。

尚、多数のイベントを複数登録をしたり、JavaScriptがそのまま書けるので複数の関数を実行させることも可能です。

<p onmouseover="console.log('hoge1');" onmouseout="console.log('hoge2'); console.log('hoge3');">コンソールログを実行するよ！</p>

以下がサンプルです。

コンソールログを実行するよ！

上記はマウスのカーソルを重ねると『hoge1』、マウスのカーソルを離すと『hoge2』、『hoge3』がコンソールに出力されます。ひとつのイベントで複数の関数を実行させたい場合は関数ごとに『;』で区切ればOKです。

では練習がてら前回書いた文字色を変える関数を『イベント処理』と組み合わせてみましょう。

<p id="hoge" onmouseover="changeColor('hoge', '#f00');" onmouseout="changeColor('hoge', '#000');">色が変わるよ！</p>

<script>
function changeColor(id, font_color){
    document.getElementById(id).style.color = font_color;
}
</script>

以下がサンプルです。

色が変わるよ！

上記は『onmouseover』(要素にマウスのカーソルを重ねたとき)に『changeColor('hoge', '#f00');』を登録し、さらに『onmouseout』(マウスのカーソルを離したとき)に『changeColor('hoge', '#000');』を登録し、文字色を黒に戻しています。

処理の流れはそこまで難しくはないかと思います。scriptタグの中や外部JavaScriptファイルで関数を定義し、それを『イベント処理』として実行させている形です。

注意すべきはイベントの発生タイミングです。イベントに定義された関数を定義したい場合はそのイベントが行われる前に関数の定義を完了させなくてはいけません。

逆にいうとイベントが発生する前に定義が終わっていればOKなので、上記のようにイベントを追加した要素(この場合はp要素)の後に関数を定義する記述が書いてあっても問題ありません。(今回の場合でいうと、ユーザーさんが『onmouseover』を行う前に関数の定義が行われていればOKという感じです。)

というわけでHTML要素に直にイベントを登録する場合はこんな感じの文法になります。今度はJavaScript側から処理を追加してみましょう。

文法的には何かしらの手法で要素を取得したあと『.』で繋げてイベントハンドラを記述してそこに処理を渡してあげるような感じです。例えば『onmouseover属性』にアクセスしたければその要素を取得した後に『.onmouseover』と付けるといったような感じになりますね。

以下は『onmouseover』と『onmouseout』にJavaScript側から処理を加えた例ですのでみてみましょう。

<p id="hoge">コンソールログを実行するよ！</p>

<script>
var elem = document.getElementById("hoge");

elem.onmouseover = function(){
    console.log('hoge1');
}

elem.onmouseout = function(){
    console.log('hoge2');
    console.log('hoge3');
}
</script>

上記は『document.getElementById("hoge");』で要素を取得してそれを変数『elem』に代入、その後に『.onmouseover』と記述し『onmouseover属性』に関数を渡しています。『.onmouseout』も同じです。

注意すべき点として『無名関数』を渡す必要があるということです。イベント属性に渡すべきなのは値ではなく処理になるので無名関数を渡してあげる、といったイメージですね。文法は『function(){}』でくくってその中に処理を記述する感じです。無名関数については次の記事でも出てくるのでそちらでも解説していきたいと思います。

さて、以上が『イベント属性』を使用したイベント登録となりますが、冒頭で解説したとおり上記のようなイベント属性でのイベント登録はあまり使われません。

というのもイベント属性を使用したイベント登録では同じイベントハンドラが記述してあった場合上書きされてしまい、あまりメンテナンス性が高いとは言えないからです。

<p id="hoge">コンソールログを実行するよ！</p>

<script>
var elem = document.getElementById("hoge");

elem.onmouseout = function(){
    console.log('hoge1');
}

elem.onmouseout = function(){ // 同じonmouseoutイベントに登録しているのでこっちで上書きされます。
    console.log('hoge2');
    console.log('hoge3');
}
</script>

上記は同じ『onmouseout属性』に関数を渡しているのですが、より下で記述してあるほうで上書きされます。上記の場合ですと『console.log('hoge1');』は上書きされてしまっているので実行されません。

自分しかJavaScriptを書かない、といった感じならば特に問題ありませんが色々な人が開発に関わってくるとそうはいきません。知らず知らずのうちに上書きしてしまい大きな事故になってしまう可能性もありますからね。ですので一般的に次の記事で解説する『addEventListener()』関数を使用する場合がほとんどとなります。

このような理由からイベント属性に記述する必要があるのは急な突貫工事な感じで処理を追加したり、何かの理由があって外部のJavaScriptファイルにさわれない場合などで使用されるのみとなっています。

というわけで長くなりましたがイベント属性に関する解説は以上となります。続いての記事では先ほどから登場している『addEventListener()』関数について勉強していきましょう。

引き続き頑張ってくださいね。ではではー。