こんにちは、エンジニアにょけん（@nyoken_box）です。
JavaScriptで使えると便利な機能「イベントリスナー」について、概要と基本的な使い方を解説します。
JavaScriptでは必須の機能なので、初心者の方はぜひ身につけてください！
JavaScriptのイベントリスナーとは？
イベントリスナーとは、「指定のイベントが発生した場合にこんな動きをするよ〜」と定義する機能です。
カンタンな例をあげてみましょう。
Bluetoothの「On/Off」切り替えをタップ（イベント発生）
→「Bluetooth設定を変更しました」というアラート画面を出す
On/Off切り替えのタップというイベントに対して、画面の動作をしていますね。
これが、イベントリスナーの機能です。
イベントリスナーの記述方法
イベントリスナーの便利さは実際に見た方がわかりやすいので、上記のアラート画面を出す機能追加を実演します。
まず、イベントリスナーを使っていない場合は、BluetoothのOn/Offを切り替えても何も起こりません。
コードも以下に載せておきます。
イベントリスナーの定義は、ピンク字<script>〜</script>内に書いていきます。
なお、後ほど重要になってくる要素についても、青字にしておきます。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script> </script> </head> <body> <div id="home" data-role="page"> <div data-role="header" > <center>Monaca実践編</center> </div> <div>マナーモード</div> <select name="flip-1" id="flip-1" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> <div>Bluetooth</div> <select name="flip-2" id="flip-2" data-role="slider"> <option value="off">Off</option> <option value="on" selected >On</option> </select> <div>各種設定</div> <ul data-role="listview"> <li><a href="">画面の明るさ</a></li> <li><a href="">着信音</a></li> <li><a href="">セキュリティ</a></li> </ul> <label>音量レベル</label> <div data-role="rangeslider"> <input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40"> <input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80"> </div> </div> </body> </html>
ちなみに、開発はMonacaで行い、jQuery Mobileを導入しています。
※MonacaやjQuery Mobileの導入方法は、以下の記事をご覧ください。
では、実際にイベントリスナを定義しましょう。
上述した通り、<script>〜</script>で囲まれた部分を変更します。
<script> $(document).on('pageshow', '#home', function() { //Bluetooth設定イベント $("#flip-2").on("change", function(){ alert("Bluetooth設定を変更しました"); }); }); </script>
これだけ。
これを書くだけで、BluetoothのOn/Off切り替え時にアラート画面を出せます。
イベントリスナー記述コードの解説
イベントリスナーがどんなもんかは、わかっていただけましたでしょうか？
ここからは、先ほど載せたコードをカンタンに解説していきます。
追記いただいたコードは、以下の通りでした。
<script> $(document).on('pageshow', '#home', function() { //Bluetooth設定イベント $("#flip-2").on("change", function(){ alert("Bluetooth設定を変更しました"); }); }); </script>
上から見ていきましょう。
イベントを起こすか
まず、「$(document).on(‘pageshow’, ‘#home’, function() {」の部分ですね。
「画面表示を行った時」というイベントを指定するには、以下のようなコードを書きます。
画面表示イベントを定義するときは、ほぼ必須の書き方なので覚えてしまいましょう。
このうち「#指定のid」とある部分ですが、ここで「どんな画面を表示した時に起動させるのか」を指定します。
今回は、「”#home”」となっていますね。
ここで思い出して欲しいのが、最初に載せたコードで青字になっていた部分。
<body> <div id="home" data-role="page"> <div data-role="header" > <center>Monaca実践編</center> </div> <div>マナーモード</div> ・・・
ここですね。
こちらで該当のページに”home”というIDをしていたため、「”home”というページを画面表示した時に」というイベントを作成することができたのです。
また、「function()」は、何かを定義する際に必ず記載する必要がある記述です。
idの前に「#」を記載しているのは、jQuery Mobileの仕様です。
イベント発生時、どんな動作をするか
「いつ」イベントを起こすかは定義したので、あとは「どんな」動作をするかについて定義すればOKです。
が、これも同じようにイベントリスナーを用いて記述してありますね。（以下ピンク字の部分）
<script> $(document).on('pageshow', '#home', function() { //Bluetooth設定イベント $("#flip-2").on("change", function(){ alert("Bluetooth設定を変更しました"); }); }); </script>
先ほどより、ちょっとカンタンです。
スライダーでのOn/Off切り替えについては、以下のコードでイベントリスナーを指定できます。
「$(“#指定のid”).on(“change”」
今回、Bluetooth切り替えのスライダーは、idを“flip-2”で指定しています。
・・・ <div>Bluetooth</div> <select name="flip-2" id="flip-2" data-role="slider"> <option value="off">Off</option> <option value="on" selected >On</option> </select> ・・・
そのため、「$(“#flip-2”).on(“change”」という書き方になっているんですね。
そして、どんな処理を行うかについては、「{ alert(“Bluetooth設定を変更しました”); })」で定義しています。
このように、自分でイベントを指定することで、思い描いた動作を定義・実現することができます。
非常に使い勝手が良いので、ぜひ学んでみてください！
JavaScriptでイベントリスナーが使えるようになったら…
イベントリスナーが使えるようになると、スマホアプリ開発に役立ちます。
というのも、ブラウザ上でスマホアプリ開発ができるツール「Monaca」で、JavaScriptを多用するんですね。
Monacaについては以下の記事で解説していますので、スマホアプリに興味がある方はぜひご覧ください。
それでは！
Twitterフォローしてね！！！
有益な無益をつぶやくよ↓↓↓
にょけん
コメント