質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.04%

【jQuery】.click(function(){}); と .on('click', function(){}); の違いが知りたい

解決済

回答 3

投稿

  • 評価
  • クリップ 6
  • VIEW 20K+

score 573

現在jQueryを勉強中なのですが
恥ずかしい話いまいち

『.click(function(){}); と .on('click', function(){}); の違い』

がわからずにいます。


・どういったときに使い分けるのでしょうか?
・処理のタイミングに違いがあったりするのでしょうか?
・もしくはどちらも機能としては同じなのでしょうか?


onメソッドは
「イベント発生時に実行する処理を設定するもの」だということはわかっているのですが、
だからclickメソッドとどういう風に使い分けるのか。というところまでわかっていません。

調べても抽象的な説明でいまいちピンときていません。

わかる方がいればお願いします。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+8

こんにちわ。
.click()では、JavaScriptで生成したDOMに対してイベントが発火させられません。
.on()では発火することができます。
以下がサンプルになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div></div>
  <input type="button" id="generate" value="button generate">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script>
    $(function(){
      
      $('#generate').click(function(){
        $('div').append('<input type="button" value="click me!" id="btn">');
      });

      // JavaScriptで生成したDOMに対して無効
      $('#btn').click(function(){
        alert('click!!');
      });

      // JavaScriptで生成したDOMに対しても有効
      $(document).on('click', '#btn', function(){
        alert('on!!');
      });
      
    });
  </script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/19 10:34 編集

    unishakooooさん
    迅速な対応ありがとうございます。
    またサンプル付きでとてもわかりやすかったです。
    これが核心を突いているのだと思います。

    ただそういった場面でないときでも先輩はonメソッドを使っていました。
    DOM生成したものにイベントを付与しない場面でも。例えば上の例なら

    $('#generate').on('click', function(){
    $('div').append('<input type="button" value="click me!" id="btn">');
    });

    といったように。
    単純に特に意味はないけどonメソッドで書いただけなのかもしれませんが。
    もし意味があるならなぜそうしたのかという理由も解消したいのでもう少しだけBAを保留にさせてください。

    別に意味はないのかなあ。。。

    キャンセル

  • 2015/07/19 11:39

    横から失礼します。

    .click(func) と .on("click", func) は全く同じです。
    http://api.jquery.com/click/#entry-longdesc
    > This method is a shortcut for .on( "click", handler )

    .click(func) の利点は、タイプ数が少ないことや、タイプミスがエラーですぐ分かることぐらいでしょう。
    ( .clock(func) は実行時にエラーになってすぐ分かりますが、.on("clock", func) はエラーにならないので分かりづらいです。)

    一方 .on() は、.on("click", "selector", func) のような使い方をすることで、後から生成したDOM要素にも適応できます。
    また、.on("click contextmenu", func) のように、一度に複数のイベントにリスナを付加することもできます。

    ですので、その先輩のコードでしたら .click(func) でも全く同じです。
    .on("click", func) を使った理由は、恐らくsho_csさんの言うように .on() で統一したかっただけだと思います。

    キャンセル

  • 2015/07/19 18:47

    kuraさん
    回答ありがとうございます!
    なるほどーonクリックにはいろんなメリットがあるんですね!
    勉強になります!ありがとうございます。

    キャンセル

  • 2019/02/26 17:51

    この辺は公式サイトいって読みましょう。
    https://api.jquery.com/click/
    これの説明文をGoogle翻訳にかけると「`.on( "click", handler )`を縮めた簡素な書き方です」と記載されています。

    ---

    > JavaScriptで生成したDOMに対してイベントが発火させられません
    jQueryではないJavaScriptの話ですが、
    クリックイベントを登録する時、その瞬間に存在しているDOMしか指定できません。
    なので、JavaScript(jQuery)でボタン等をDOMツリー上に生成したり削除したりするときにイベントを設定する必要があり面倒です。

    そこで、jQueryではバブリングを使ってイベントの発火を捕まえます。
    https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture

    `<div><span><input /></span></div>`というDOMツリーになっているとしましょう。
    inputの中でクリックした場合、それを包んでいるspanやdivの上でクリックしているわけですよ。
    なので、inputのクリックイベントを実行した後、input->span->divという風に遡りながらクリックイベントを伝播させていきます。これがバブリング。

    jQueryのonを使った時は、親であるdivにクリックイベントを仕込んでおき、
    divのクリックイベント内で、inputから浮上してきたイベントならば◯◯を実行する。
    …という風な仕掛けを行って実現させています。

    なのでinputボタンに仕込みたいのに、inputボタンがまだDOMで作られてない。
    そんな状況でも構わず登録出来るんですね。
    もちろんbodyタグとかに山のようなイベント数を仕込んでしまうと条件判定が重くなるので控えめに使ってください。

    キャンセル

+3

追加要素へのイベント付与が一番メインだと思います。
jQuery 便利なonを使おう(on click)

あえて.clickを使いたい場面と言うのは相当限られると思います。
であればonで統一したほうがバグも少なく、見た目もいいと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/19 18:56

    sho_csさん
    回答ありがとうございます。参照ページも拝見しました。
    onはbind、live、delegateのいいとこ取りなんですね。
    先輩も統一感を持たせるために使っていたのかもしれません。
    感謝しています。

    キャンセル

+2

clickのメリットは短く書ける事。これがメインでしょう。

あと、意思・意図が明確になること。clickの場合「ボタンを押したとき」に使用することが多いです。その場合、他のイベントと併用することが稀だと思います。ですので、「これはボタンをクリックしたとき専用のイベントなのだ」「将来にわたって他のイベントを追加するつもりはない」という意思や意図を込めることができます。

私はボタンに対するクリックイベントの場合にはclickを使用します。


onのメリットは、複数のイベントを追加できること。例えばテキストボックスの変化に適用しようと思った場合、とりあえずchangeを使うでしょう。また、changeだとフォーカスが外れたときだけなので、keyupも追加したいというときに「.on("change keyup", func)」などと用意に対象イベントを追加できるので便利です。また独自のイベントを作成し追加することが出来る点もメリットです。

ただ一方で、何を書いてもエラーにならないので、「.on("chenge", func)」などとタイポしても気づきにくくバグの原因になりやすいというデメリットがあります。


話を戻して、ボタンクリックに限定した話で言うと、どちらでもいいと思います。すべてをonで統一するというルールがあってもいいし、シンプルに短く書ける方法がせっかく用意されているのだからそれを使うという方針があってもいいと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/19 18:52

    miu_rasさん
    丁寧な説明ありがとうございます!
    onメソッドには多くのメリットがあるんですね。動的に生成されたDOM要素に対してイベントを付与するといった知識しかなかったので、これからもっと使って知識を深めようと思いました。回答ありがとうございます。
    先輩の意図も掴めたのでスッキリしました。感謝しています。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る