jQueryのon("click")とclick()の違いについて

「jQueryのon("click")とclick()の違い」についてQiitaにて調べていたのですが、いまいち分からず質問させて貰いました。

$(document).ready(function () {
  $(document).on("click",　".click_button", function(){
    console.log("clickされたよ！");
  });
});

こちらの「on」が指定された場合のコードについて、「「特定のクラスが指定されたDOM」から「Documentそのもの」に対してイベントが登録されたことになる(はず)。」」とあるのですが、Documentそのものを指定した場合、非同期などで、HTMLを新しく生成した場合でもイベントが発火するといった仕組みが分かりません。
「Documentそのもの」といった部分もあまりピンとこない為、ご説明頂けましたらありがたいです。

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

回答5件

なんでQiitaの記事を読みながらウンウン唸ってるんですか？
作った人に聞くのが一番に決まってるでしょう。

というわけで、間違いのないjQuery公式ドキュメントです。
せめてこれらを頭に叩き込んでください。

.on
.click

えっ、英語は辛い？しょうがないなぁ…
でしたら日本語訳のドキュメントも存在します。

バージョン1.9？古すぎじゃね？何のやくにたつんだと思うかもしれません。
ですがjQueryは後方互換に優れてたライブラリなので、
バージョンは古くても思想自体はほとんど変化しておらず使えます。

英語が辛いなら、まずはこっちをしっかり読んでください。
内部のロジックは結構変化していますが、使い方という面ではほとんど変わってないはずです。

.on
.click

以下リファレンスからの抜粋

.click( handler )
This method is a shortcut for .on( "click", handler ) in the first two variations

この.click(handler)という機能は、
.on("click", handler)という書き方のショートカットとして用意されたものです。

はい「jQueryのon("click")とclick()の違いについて」のタイトル回収が出来ましたね。
.onの方はバブリングで捕まえるという使い方も用意されていますが、
.clickにはバブリングで子孫の要素でのクリックを捕まえるという機能は存在しないので、凝った事がしたければ.onを使うしかありません。

ほとんどの主要なブラウザでは、イベント伝搬(バブリング)は要素の一番内側から、BODYに向かっていきます。ただし、IE8以下のバージョンでは一部のイベント(changeやsubmit)でこれらの動作とは違った動きをしますが、 jQueryがこれらの違いを内部的に正しています。

セレクタ引数を省略、またはnullを指定するとイベントハンドラは選択された要素を直接参照するようになります。その選択要素でのイベント発生、または子孫要素でのイベント伝搬でイベントハンドラが実行されるようになります。セレクタが指定されれば、選択要素を直接参照するのはなく、delegateのようにそのセレクタにマッチした部分でイベントが発生した場合にイベントハンドラを実行するようになります。

こちらは日本語ドキュメントの方からの抜粋です。
理解する為に必要な「バブリング」という単語が出てきましたね。
バブリングがなんぞやというのは他の回答者さんから解説がいくつも出てるので割愛します。

というわけで、

こういったライブラリは使い方説明書が公式から出ているので、
公式の使い方説明書読めよという話です。

実際には読んでもわからなかった……というケースが多いと思いますが、
何十回でも何百回でも一応目を透してみるだけでも、
半年、1年後には脳死しているだけの同じ位の実力のエンジニアと比べて2段階も3段階も優れたエンジニアになるはずです。

投稿2019/08/09 06:13

miyabi-sun

総合スコア21412

まず大前提として理解してほしいことに、イベントのバブリングというものがあります。ある要素でclickイベントが発生すると、その要素自身だけではなく、親要素、さらにその親要素、…、<body>、<html>、window、documentと各所でclickイベントのハンドラが動くのです。

document.on('click')とした場合、これを利用して、下で起きたclickイベントをdocumentでまとめて拾うことができます。.click_buttonの条件は、実際にクリックされた時にチェックされるので、イベントセット時にボタンがあろうがなかろうが無関係です。

投稿2019/08/09 04:37

maisumakun

総合スコア146581

退会済みユーザー

2019/08/09 09:39 編集

ご回答ありがとうございます。「clickイベントのハンドラが動く」とはどのような意味なのでしょうか...? 仮にある要素でクリックイベントが発生し、バブリングが起きたとしても他のbody要素などは関係がないため、あまり意味がないように思えてしまいます...

maisumakun

2019/08/09 10:41 編集

> 他のbody要素などは関係がないため、あまり意味がないように思えてしまいます... いえ、body要素にclickイベントを仕掛けてあれば、そのclickイベントも発動します（それがバブリングです）。そして、イベントオブジェクトからはイベントがどの要素で起きたという情報も拾えるので、それを識別して特定の要素で起きたclickイベントを抽出できます。

退会済みユーザー

2019/08/09 10:44

あまり掴めず申し訳ないのですが、body要素が関係がないと思った理由は、body要素自体はクリックされた訳ではない為、clickイベントが発動するといった点が不自然に思えるといった感じです...

maisumakun

2019/08/09 11:01

不自然かもしれませんが、そういうように動作します。

maisumakun

2019/08/09 11:04 編集

イメージしやすい例を出すと、たとえば<a><strong>なにか</strong>続き</a>のようになっていたとします。ここで「なにか」をクリックして、「<strong>の中だから<a>の効果は生じない」となっては不便ですよね？それと同様に、「<body>の中のどれかの要素がクリックされた」ことは、視点を変えれば「<body>がクリックされた」とも言えます。

退会済みユーザー

2019/08/09 11:15

そうですね...<a>の効果というのは<a>にクリックイベントなどの処理を施していた場合ということでしょうか？

退会済みユーザー

2019/08/09 11:19 編集

＞「<body>の中のどれかの要素がクリックされた」ことは、視点を変えれば「<body>がクリックされた」とも言えます。なんとなく掴めた気がします。つまり、もともとbodyに対して、document.on('click')によってクリックイベントが登録されているため、非同期により新たにHTMLが追加された場合でも、そのHTMLにクリックイベントを適用することができるといった感じでしょうか？

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

Documentそのものを指定した場合、非同期などで、HTMLを新しく生成した場合でもイベントが発火するといった仕組みが分かりません。

これは色々とパターンを作って動かしてみると理解が深まるかもしれません。

基本的に既に生成されたHTMLから指定の要素を探し出してイベントを登録します。
つまり、$(document).ready(function () {を指定していない場合、

下記のような記述になっているとイベントは登録されません。
ので、クリックしても動きません。

html
1<script>
2$('.click_button').on('click', function(){
3    console.log("clickされたよ！");
4  });
5</script>
6
7<button type="button" class="click_button">click</button>
8

それをこうした場合、

html
1<script>
2  $(document).on("click",　".click_button", function(){
3    console.log("clickされたよ！");
4  });
5</script>
6<button type="button" class="click_button">click</button>

イベントはdocument自体に登録されているので、HTMLが生成されきっていなくても、イベントは登録され、onの第2引数に指定されたselectorに反応してイベントが作動するようになります。

じゃあ、documentって何なのよとなるとそれこそドキュメントを確認しましょう。

Document

Document インターフェイスはブラウザーに読み込まれたウェブページを表し、 DOM ツリーであるウェブページのコンテンツへのエントリーポイントとして働きます。 DOM ツリーは <body> や <table> など、多数の要素を持ちます。これはページの URL を取得したり文書で新たな要素を作成するなど、文書全体に関わる機能を提供します。

要は「HTML本体」（意訳）と言い換えても良いかもしれません。

なので、後から動的に要素が追加されようと、HTML本体内部で追加される出来事なので、イベントはきちんと登録されて実行可能である　ということになります。

投稿2019/08/09 04:42

m.ts10806

総合スコア80888

このような記述があったと仮定します。
これで、bodyに追加された要素にクリックイベントは登録され…ません。

html
1<html>
2<head>
3  <script>
4    $(document).ready(function () {
5      $(".click_button").click(function(){
6        console.log("clickされたよ！");
7      });
8
9      $("body").append($("<div>",{
10        class: "click_button"
11      }));
12    });
13  </script>
14</head>
15<body>
16</body>
17</html>

.click_buttonを持つDOM要素に対してクリックイベントを登録した後で.click_buttonを持つDOM要素を追加したからです。

後から追加したDOM要素に対しても自動的にクリックイベントを登録したい場合はそのセレクタからではなく、documentのjQueryオブジェクトからonイベントを呼びます。

$(document).ready(function () {
  $(document).on("click",　".click_button", function(){
    console.log("clickされたよ！");
  });
  $("body").append($("<div>",{
    class: "click_button"
  }));
});

投稿2019/08/09 04:36

編集2019/08/09 04:41

BluOxy

総合スコア2663

イメージ的にはこんな感じですね

javascript
1<script>
2document.addEventListener('click',e=>{
3  if([].indexOf.call(document.querySelectorAll('.click_button'),e.target)>=0){;
4    console.log(e.type);
5  }
6});
7</script>
8<input type="button" value="click" class="click_button">