【初心者向け】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.09.29

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

2018.10.02

 

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

上述した通り、<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.09.29

 

それでは!

 

Twitterフォローしてね!!!

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

にょけん

スポンサーリンク