【初心者向け】JavaScript「イベントリスナー」ってどんな機能? – にょけんのボックス

プログラミング
スポンサーリンク

 

こんにちは、エンジニアにょけん(@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の導入方法は、以下の記事をご覧ください。

【3分でわかる】Monacaとは何?メリットと開発環境構築の手順を解説

2018年9月29日

Monacaに「jQuery Mobile」を導入する方法・基本的な使い方は?

2018年10月2日

 

では、実際にイベントリスナを定義しましょう。

上述した通り、<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() {」の部分ですね。

「画面表示を行った時」というイベントを指定するには、以下のようなコードを書きます。

$(document).on(‘pageshow’, “#指定のid”, 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設定を変更しました”); })」で定義しています。

alert(“アラート画面に出したい文言”)

このように、自分でイベントを指定することで、思い描いた動作を定義・実現することができます。

非常に使い勝手が良いので、ぜひ学んでみてください!

 

JavaScriptでイベントリスナーが使えるようになったら…

イベントリスナーが使えるようになると、スマホアプリ開発に役立ちます。

というのも、ブラウザ上でスマホアプリ開発ができるツール「Monaca」で、JavaScriptを多用するんですね。

Monacaについては以下の記事で解説していますので、スマホアプリに興味がある方はぜひご覧ください。

【3分でわかる】Monacaとは何?メリットと開発環境構築の手順を解説

2018年9月29日

 

それでは!

 

Twitterフォローしてね!!!

有益な無益をつぶやくよ↓↓↓

にょけん

スポンサーリンク

Visited 9 times, 1 visit(s) today

コメント

タイトルとURLをコピーしました