.click() と .on() の違いを理解する

HTML要素にクリックイベントを付与する時によく使われる関数といえば .click() と .on() ですね。
だいたい同じことができるので、あまり違いを意識せずに使っている方もいるかもしれません。
ですが、使い分けができればけっこう便利なのでしっかり違いを理解しておきましょう。

.click() と .on() の違いは、簡単に言うとこんな感じです。↓

.click()
- ページロード時に存在する要素にのみイベントを付与する。
- その後動的に追加された要素には有効じゃない。
.on()
- ページロード後、動的に追加された要素にもイベントを付与する。

この時点で「なるほどね」と思えた方はブラウザバックでOKです！
「ん？」な方は「忍者をクリックすると分身する」アプリでこれらの挙動を実際に確認してみましょう。

分身の準備

分身の術アプリの準備です。
以下のようにhtmlファイルとcssファイルを書いて忍者の画像を表示してください。
※ ここは本題じゃないので適当でも大丈夫です。

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>分身の術！</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="javascript/script.js"></script>
</head>

<body>
    <div id="main-div">
        <img class="ninja" src="./image/ninja.png"></img>
    </div>
</body>

</html>

style.css

# main-div {
    margin: 10px;
    border-radius: 10px;
    display: flex;
    text-align: center;
}

こんな感じ

.click() の場合

それではJavaScript（jQuery）で分身処理を書いてみましょう。
※ jQueryで .click() を使う方法はこちらの記事でも紹介してるので、jQueryに自信が無い方などは良かったら覗いてみてください。

script.js

$(function () {
    // 忍者を表示するimgタグ
    var ninja = '<img class="ninja" src="./image/ninja.png"></img>';

    // 上記「ninja」をappendする関数
    var appendNinja = function () {
        $("#main-div").append(ninja);
    }

    // .click() で、忍者クリック時に上記「appendNinja」が呼ばれるように設定
    $(".ninja").click(appendNinja);
});

.click() でイベントを付与しました。
この時、オリジナルの忍者をクリックすれば分身できますが、
分身によって生み出された忍者をクリックしても何も起きません。

.on() の場合

.on() ではどうなるでしょうか？

script.js

$(function () {
    // 忍者を表示するimgタグ
    var ninja = '<img class="ninja" src="./image/ninja.png"></img>';

    // 上記「ninja」をappendする関数
    var appendNinja = function () {
        $("#main-div").append(ninja);
    }

    // .on() で、忍者クリック時に上記「appendNinja」が呼ばれるように設定
    $(document).on("click", ".ninja", appendNinja);
});

.on() でイベントを付与しました。
今回は、オリジナルの忍者はもちろんのこと、分身によって生み出された忍者をクリックした場合でも分身が増えていきます。

※ $(document)で、Webページを構成するHTML要素を取得できます。
※ $(document)の代わりに$("#main-div")のように対象の親要素を指定しても動きます。

$("#main-div").on("click", ".ninja", appendNinja);

使い分け

上で説明してきた通り、.click() と .on() の違いは「動的に追加された要素」に対して効果があるかどうかです。

そのことを理解していれば、「後から追加した要素にもイベントを付与したい」という時には .on() 、
「後から追加した要素にはイベントを付与したくない」という時には .click() 、
というように使い分けできますね！

ひとこと

好きな忍術は水蜘蛛の術。
水の上を走る姿は憧れる。