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

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

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

がわからずにいます。

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

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

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

わかる方がいればお願いします。

行動規範の内容に同意します

回答3件

ベストアンサー

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

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5</head>
6<body>
7  <div></div>
8  <input type="button" id="generate" value="button generate">
9  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
10  <script>
11    $(function(){
12      
13      $('#generate').click(function(){
14        $('div').append('<input type="button" value="click me!" id="btn">');
15      });
16
17      // JavaScriptで生成したDOMに対して無効
18      $('#btn').click(function(){
19        alert('click!!');
20      });
21
22      // JavaScriptで生成したDOMに対しても有効
23      $(document).on('click', '#btn', function(){
24        alert('on!!');
25      });
26      
27    });
28  </script>
29</body>
30</html>

投稿2015/07/19 01:13

編集2015/07/19 01:15

退会済みユーザー

総合スコア0

k499778

2015/07/19 01:35 編集

unishakooooさん迅速な対応ありがとうございます。またサンプル付きでとてもわかりやすかったです。これが核心を突いているのだと思います。ただそういった場面でないときでも先輩はonメソッドを使っていました。 DOM生成したものにイベントを付与しない場面でも。例えば上の例なら $('#generate').on('click', function(){ $('div').append('<input type="button" value="click me!" id="btn">'); }); といったように。単純に特に意味はないけどonメソッドで書いただけなのかもしれませんが。もし意味があるならなぜそうしたのかという理由も解消したいのでもう少しだけBAを保留にさせてください。別に意味はないのかなあ。。。

kura

2015/07/19 02: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() で統一したかっただけだと思います。

k499778

2015/07/19 09:47

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

miyabi-sun

2019/02/26 08: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タグとかに山のようなイベント数を仕込んでしまうと条件判定が重くなるので控えめに使ってください。

行動規範の内容に同意します

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

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

投稿2015/07/19 02:22

sho_cs

総合スコア3541

k499778

2015/07/19 09:56

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

行動規範の内容に同意します

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

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

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

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

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

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

投稿2015/07/19 06:55

miu_ras

総合スコア902

k499778

2015/07/19 09:52

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

行動規範の内容に同意します

あなたの回答