BinaryDevelop
  1. ホーム
  2. jquery

[解決済み] .on('click') と .click() の違いについて

2022-03-17 19:53:21

質問

以下のコードに違いはありますか？ 

$('#whatever').on('click', function() {
     /* your code here */
});

そして 

$('#whatever').click(function() {
     /* your code here */
});

解決方法は？

使い方の違いだと思います。

私は .on オーバー .click というのも、前者は 可 は、動的に追加される要素に対して、より少ないメモリと作業量を使用します。

次のようなhtmlを考えてみましょう。 

<html>
    <button id="add">Add new</button>
    <div id="container">
        <button class="alert">alert!</button>
    </div>
</html>

で新しいボタンを追加します。 

$("button#add").click(function() {
    var html = "<button class='alert'>Alert!</button>";
    $("button.alert:last").parent().append(html);
});

で、"Alert!"でアラートを表示させたい場合。そのためには、"click" または "on" のいずれかを使用することができます。

を使用する場合 click 

$("button.alert").click(function() {
    alert(1);
});

を使用すると セパレート ハンドラが作成されます。 すべての要素 にマッチします。つまり

  1. マッチングする要素が多い場合、同一のハンドラが多数作成されるため、メモリフットプリントが増加します。
  2. 例えば、上記のhtmlでは、新しく追加された "Alert!" ボタンは、ハンドラを再バインドしない限り機能しません。

を使用する場合 .on 

$("div#container").on('click', 'button.alert', function() {
    alert(1);
});

上記で シングル のハンドラです。 すべての要素 は、動的に作成されたものも含めて、セレクタにマッチします。

を使用するもう一つの理由は .on

Adrien が以下のようにコメントしているように、もう一つの理由は .on は名前空間化されたイベントです。

でハンドラを追加した場合 .on("click", handler) で削除するのが普通です。 .off("click", handler) で、まさにそのハンドラを削除します。明らかに、これは関数への参照を持っている場合にのみ機能します。では、持っていない場合はどうするのでしょうか？名前空間を使うのです。 

$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });

を経由してバインドを解除しています。 

$("#element").off("click.someNamespace");

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します