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

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

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

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

解決済

クリックイベントの定義の仕方が分かりません。

taka_oct092018
taka_oct092018

総合スコア116

jQuery

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

2回答

0グッド

1クリップ

269閲覧

投稿2022/12/06 05:32

$(this.root).on('click', 'input[type="button"]', $.proxy(this, 'click'));
上記のコードの意味がよく分かりません。

(1). thisが何を指しているかよく分かりません。
(1-1). 「this.root」と「$(this.html)」のthisはCounterWidgetオブジェクトのことでしょうか?
(1-2). 「$.proxy(this, 'click')」のthisは全く意味が分かりません。

(2). 自分なりの解釈は以下の通りです。
this.root(this.html)内のinput[type="button"]がクリックされた場合、
$.proxy(this, 'click')を実行する。

(3). $.proxy(this, 'click')の意味。
下記のサイトには「jQuery.proxy(thisとするもの, function名)」とあります。
ですが、このコードでは「thisとするもの」の引数にthisが、
「function名」は'click'になっています。
クリックイベントを定義しているはずなのに'click'を実行するとは
どういうことなのかさっぱり分かりません。

素人故、見当違いな解釈だらけだと思いますが、ご教授の程お願い致します。

「改訂新版jQuery本格入門 P282のlist6-42」より

検索したサイト
https://www.jquerystudy.info/reference/utilities/proxy.html
jQuery.proxy( )thisの内容を変更

jQuery

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>カウンタウィジェット</title> 6 <script src="../lib/jquery-1.11.1.min.js"></script> 7 </head> 8 <body> 9 <script>// <![CDATA[ 10 // ボタンとカウンタの値を表示する要素を持つカウンタウィジェット 11 var CounterWidget = function(id, btnVal, initial, step) { 12 // ウィジェットの初期値を設定 13 this.id = id || 'counter'; 14 this.btnVal = btnVal || 'カウンタ'; 15 this.count = !isNaN(initial) && Number(initial) || 0; 16 this.step = !isNaN(step) && Number(step) || 1; 17 18 // HTMLの生成 19 this.html = '<div id="' + id + '" class="counter-widget">' + 20 '<input type="button" value="' + btnVal + '" />' + 21 '<span></span>' + 22 '</div>'; 23 }; 24 25 CounterWidget.prototype = { 26 inc: function() { // カウンタの加算 27 this.count += this.step; 28 }, 29 set: function(tag) { // カウンタの値を表示 30 tag.text(this.count); // tagはウィジェット内の<span> 31 }, 32 click: function() { // ボタンクリック時のイベント処理 33 this.inc(); this.set(this.tag); 34 }, 35 appendTo: function(toElem) { // ウィジェットのHTML文書への追加 36 this.root = $(this.html).appendTo(toElem); 37 $(this.root).on('click', 'input[type="button"]', $.proxy(this, 'click')); 38 this.tag = this.root.find('span'); 39 this.tag.promise().done($.proxy(this, 'set')); // カウンタの初期値を表示 40 return this; 41 }, 42 remove: function() { 43 $(this.root).off('click', 'input[type="button"]'); 44 $(this.root).remove(); 45 } 46 }; 47 48 new CounterWidget('counter1', '増えるカウンタ').appendTo(document.body); 49 new CounterWidget('counter2', '減るカウンタ', 0, -1).appendTo(document.body); 50 // ]]></script> 51 </body> 52</html>

以下のような質問にはグッドを送りましょう

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

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

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

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

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

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

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

適切な質問に修正を依頼しましょう。

回答2

2

質問の趣旨はおそらく教本の記述の読解だとおもいますが、正直jQueryの学習の割にjQueryらしさを活用していなくてげんなりする参考書ですね・・・
ざっくりjQueryっぽく書いてみましたので参考までに

javascript

1$(function(){ 2 function CounterWidget(id, btnVal='カウンタ', initial=0, step=1) { 3 var count=initial; 4 var dom = $('<div class="counter-widget">').attr('id',id) 5 .append($('<input type="button">').val(btnVal) 6 .on('click',function(){ 7 count+=step; 8 $(this).next('span').text(count); 9 })) 10 .append($('<span>')); 11 return dom; 12 }; 13 new CounterWidget('counter1', '増えるカウンタ').appendTo($('body')); 14 new CounterWidget('counter2', '5減るカウンタ', 0, -5).appendTo($('body')); 15 new CounterWidget().appendTo($('body')); 16});

投稿2022/12/07 02:27

yambejp

総合スコア108937

taka_oct092018, spoofy_dragon😄を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

taka_oct092018

2022/12/08 13:42

yambejp様、いつも返信ありがとうございます。 具体的なコードを挙げて頂きありがとうございます。 jQueryを本格的に解説している専門書はどれも古くて、分かりにくいです。

1

ベストアンサー

まず、このコードのような、コンストラクタ関数を直接書くのは、かなり古いやり方です。本自体も2014年のものですし、(すでに書かれたコードを改修するのでもなければ)今からわざわざ学ぶものではありません。


参考までに…

(1-1). 「this.root」と「$(this.html)」のthisはCounterWidgetオブジェクトのことでしょうか?

はい。

「$.proxy(this, 'click')」のthisは全く意味が分かりません。

これも同じCounterWidgetオブジェクトです。

クリックイベントを定義しているはずなのに'click'を実行するとはどういうことなのかさっぱり分かりません。

「クリックイベントが起きたらclickメソッドを呼び出す」という設定を行っています。何が疑問なのかわかりません。

投稿2022/12/06 06:10

maisumakun

総合スコア141339

taka_oct092018❤️を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

taka_oct092018

2022/12/06 08:43 編集

maisumakun様、いつも返信ありがとうございます。 >> 何が疑問なのかわかりません。 言葉足らずで申し訳ありません。 「クリックイベントが起きたらclickメソッドを呼び出す」は理解出来ています(あるいはそのつもりです)。 クリックイベントの定義 : $(this.root).on('click', 'input[type="button"]', $.proxy(this, 'click')); イベントが発火した時の処理 : click() { this.inc(); this.set(this.tag); } 「$.proxy(this, 'click')」の部分はどのよう処理が行われるかがよく分かりません。 >> 今からわざわざ学ぶものではありません。 お言葉ではありますが、ある程度区切りのいい所まではやり遂げたい気持ちがあるので、しばらくは継続します。 この書籍の内容が古いということは重々承知しておりますが、jQueryを本格的に学べる専門書は 数が限られているのが現状です。 もしよろしければお勧めの解説書・ウェブサイトなどを紹介して下さいね。
maisumakun

2022/12/06 08:45

> $.proxy(this, 'click')」の部分はどのよう処理が行われるかがよく分かりません。 $.proxy自体は「呼ぶとthis.clickを呼び出す」関数を返しています。 (jQuery 3.3で$.proxyは非推奨となり、Function.prototype.bindが推奨されています)
taka_oct092018

2022/12/06 13:03

「処理の流れ」 (1). クリックイベントの定義 : $(this.root).on('click', 'input[type="button"]', $.proxy(this, 'click')); (2). クリックすると、$.proxyによりthis.clickがclick(){}を呼び出す。 (3). (2)の返り値という形でイベントハンドラ関数が実行される。 $.proxyは非推奨になっていたのですか…。全然知りませんでした。 「$.proxy(this, 'click')」の部分を「this.click.bind(this)」に書き変えた所、 無事正常に動作しました。 今後は再度bind()を復習します。
maisumakun

2022/12/06 14:29

> 「処理の流れ」 違います。$.proxyはイベントセットの段階で実行されています。
taka_oct092018

2022/12/08 13:42

maisumakun様、いつも返信ありがとうございます。 そうだったのですか、勘違いしておりました。 (なぜか、前に書いたコメントが削除されてしまっています。)

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

jQuery

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