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

$(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>

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

回答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

総合スコア114968

taka_oct092018

2022/12/08 13:42

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

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

ベストアンサー

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

参考までに…

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

はい。

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

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

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

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

投稿2022/12/06 06:10

maisumakun

総合スコア145201

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様、いつも返信ありがとうございます。そうだったのですか、勘違いしておりました。（なぜか、前に書いたコメントが削除されてしまっています。）

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.47%

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

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

質問する

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

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

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

関連した質問