イベント処理(2)

みなさまどうもこんにちは。

続きまして『addEventListener()関数』について勉強していきましょう。あ、『addEventListener』は『あどいべんとりすなー』って読みます。

『addEventListener()関数』は先ほどの記事で勉強したような『イベント登録』を行う関数です。

JavaScriptにおいてのイベント登録は『addEventListener()関数』を使用する場合がほとんどとなります。前回の記事で勉強したとおり、『イベント属性』で登録すると処理が上書きされてしまったり、JavaScriptファイルの中で処理を完結できなかったりとあまりメンテナンス性が高いとは言えないからですね。

というわけで早速『addEventListener()関数』を記述してみましょう。

『addEventListener()関数』は第一引数に『イベントハンドラ』(『イベントタイプ』、単純に『type』とも呼ばれます)、第二引数に『関数』、第三引数は『イベントバブリング』の設定となります。

記述すると以下のような感じになります。

<p id="hoge">アラートを実行するよ！</p>

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

elem.addEventListener("click", function(){
    alert('hoge1');
}, false);
</script>

ちょっと構文が難しいですね、『,』に注目して引数ごとの記述方法をチェックすると分かりやすいかもしれません。

まず『document.getElementById()関数』などで要素を取得し、その後に『.addEventListener』と続けて記述します。

今回は『click』(要素がクリックされたとき)に登録したいので第一引数には『click』と記述しています。こちら文字列で関数に渡す必要がありますので『"』か『'』でくくることを忘れないようにしてください。

『addEventListener()関数』に渡すイベントハンドラは以下のようなものがあります。

その他にもイベントハンドラは多数存在しています。英語になってしまいますが以下のmozillaさん(Firefoxを作っているみなさま)の公式リファレンスサイトを参考にすると良いです。

https://developer.mozilla.org/en-US/docs/Web/Events

注意すべき点がひとつあり、『イベント属性』で記述したときとちょっとイベントの名前が変わっています。『イベント属性』でクリックイベントを登録するときは『onclick』でしたね。『addEventListener()関数』でのイベントハンドラの名前は『click』なので『on』が抜けちゃっています。ここ間違いやすいので注意してください。

続いて第二引数には『function(){}』と記述し、その『{}』の中に処理を追加します。

この『function(){}』は一般に『無名関数』と呼ばれます。前回も登場しましたね。

『無名関数』とはその名の通り『名前のついていない関数』といったところです。『関数式』で同じような記述がありましたね、『addEventListener()関数』の第二引数には『関数オブジェクト』を渡す必要があるので『無名関数』で渡す必要があります。
※関数式についてはこちらへ

ちょっと慣れないと難しいですが『function(){}』でくくる、と丸暗記しちゃいましょう。『関数オブジェクト』等についての詳細は先の記事で解説していきます。

そして第三引数には『false』と記載します。これは『イベントバブリング』を行わない、という設定で、『イベントバブリング』とは親要素にイベントを伝播させるかさせないか、という意味です。こちらもちょっと難しいので先の記事で解説させていただきますが、親要素にイベントを伝播させる実装パターンはあまり存在しません。なのでイベントを伝播させない『false』と記述する、と丸暗記してしまいましょう。ちなみにイベントを伝播させたい場合は『true』と記述します。

大まかな概要はこのような感じになります。

さて、では先程も説明したとおり『addEventListener()関数』は同じイベントで処理を追加しても、上書きされずにイベント処理を複数追加することができます。

以下の記述をみてください。

<p id="hoge">アラートを実行するよ！</p>

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

elem.addEventListener("click", function(){
    alert('hoge1');
}, false);

elem.addEventListener("click", function(){
    alert('hoge2');
}, false);
</script>

上記は同じ『イベントハンドラ』の『click』を2回、『addEventListener()関数』で登録しています。以下にサンプルを用意したのでクリックしてみてください。

アラートを実行するよ！

クリックしてみると『alert()』関数が2回呼び出されるはずです。このように最初に書いた処理が上書きされて消されたりはしませんので色々な人が開発に参加してイベント処理を追加していっても前の人の処理を消すことなく構築できるの安心です。

続いて『イベントハンドラ』での注意点として『load』があります。これはDOMの読み込み(HTMLタグとか読み込んだとき)が完了したときに発生するイベントになります。

ページのロード完了時(DOMの読み込み完了時)に処理を実行させる場合はひとつひとつのHTML要素に紐付いているわけではなくHTMLドキュメント全体に紐付けられているイベントになりますので要注意です。この場合は『windowオブジェクト』に『load』イベントを追加します。

以下の様な感じですね。

<script>
window.addEventListener("load", function(){
    alert("DOMの読み込みが完了したよ！");
}, false);
</script>

別ページで確認する

ページの読み込みが完了したら『alert()』関数が呼び出されたと思います。

ちょっとややこしいところですが、この『windowオブジェクト』とは『ブラウザそのもの』を指すオブジェクトだと思って頂いて問題ありません。『loadイベント』はHTMLタグ全体の読み込みが完了したときに発生するイベントなので『ブラウザそのもの』を指す『windowオブジェクト』にイベント登録する必要がある、といったイメージです。

<script>
document.addEventListener("load", function(){
    alert("DOMの読み込みが完了したよ！");
}, false);
</script>

といったところが『addEventListener』関数の概要になります。ちょっと『無名関数』が必要であったり、引数が多かったりして大変なところもありますが頑張ってください。

さて、ではもういっちょ困ったところを紹介したいと思います。この『addEventListener()関数』、実は『Internet Explorer 8』以前の『Internet Explorer』では動きません。

この『addEventListener()関数』は10年以上前、JavaScript創世記にはすでに定義されていたにも関わらず、です。『IE』は中々手強いですね。あ、『IE9』以降では動きます。

では『IE8』以下でイベント処理をさせたい場合はどうするか、というと『addEventListener』関数に取って代わる『attachEvent関数』というのがあったりします。『Internet Explorer』独自の関数になります。

この『attachEvent』関数の記述方法は基本的に『addEventListener』関数と同じです。しかし、『IE8』以下のみのブラウザで実行させないといけないため、『ブラウザ判定』を行わないといけなかったりしますのでちょっと処理の書き方が難しいです。なので『attachEvent』関数についての細かい解説は先の記事でやっていきたいと思います。

『IE8』以下のイベント登録は『attachEvent』関数を使う必要がある、とだけ覚えておくことにしましょう。

以上でイベント処理に関する基本的な解説は終わります。ちょっと難しかったでしょうか。大変かと思いますが自身で色々記述してみると良い勉強になります。引き続き頑張っていってください。

続いての記事では比較演算子と真偽値について勉強していきたいと思います。

また次の記事でお会いしましょう。ではではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア