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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

23401閲覧

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

k499778

総合スコア599

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

3グッド

7クリップ

投稿2015/07/19 00:31

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

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

がわからずにいます。

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

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

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

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

nuttstock, Alice_W, ikuwow👍を押しています

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

0

追加要素へのイベント付与が一番メインだと思います。
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のいいとこ取りなんですね。 先輩も統一感を持たせるために使っていたのかもしれません。 感謝しています。
guest

0

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要素に対してイベントを付与するといった知識しかなかったので、これからもっと使って知識を深めようと思いました。回答ありがとうございます。 先輩の意図も掴めたのでスッキリしました。感謝しています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問