今更ながらjQueryのon("click")とclick()の違いを認識した恥ずかしい話し

題名でもある通り恥ずかしい話です。
on()とclick()の違いについてようやく得心がいったというお話です。

追記:
コメントでも指摘されていますがon()とclick()の違いではなくてイベントハンドラを設定する対象の違い、が正解ですね。
@sengoku さんありがとうございます！

大事なお話

なおこの内容は恥ずかしい人が書いてるので多分に間違いや勘違いしている可能性があるのでその場合はPRをくれ。
コメントは「こういう方法もあるよ！」や他にもここで書かれていない優れた点の補足がある場合のみくれ。
タイプミスもPRでください、コメントで指摘とかいう地獄は嫌なんじゃ！！！

TL;DR

on()とclick()でEventListenerに登録する方法はjQueryではよくみかけることと思う。
ジャバスクリプト初心者は参考事例がどっちも豊富にあって迷うことがあると思う、っていうか迷え。
んでフロントエンドエンジニア識者からは「え？まだclick()使ってんの？プププッ」みたいなことをたまに見聞きしてたんだけど具体的にどうon()のほうが優れているのか？までは理解していなかった。

対象読者

• JavaScriptをジャバスクリプトとか書いちゃう恥ずかしい人
• 10年くらい前のジャバスクリプトの知識で止まって恥ずかしい人
• React.jsだ！Angularだ！Vue.jsだ！ってご時世に「漢は黙ってjQuery！」な人
  • jQueryが悪いわけではない…がまあ上2つに該当する人だいたいjQuery使ってるイメージなので。
• ジャバスクリプト苦手な恥ずかしい人

結論:

on()のほうが優秀、少なくとも自分が使う範囲でclick()を使う必要性はないのかなと。
迷ったらとりあえずon()で問題なさげ。

説明

通常使う分にはon()もclick()も大差は感じられないと思う。
具体的にどう優秀なのか？

jQuery使ってると頻繁に目にするこのDOMの読み込みが終わる後に実行する処理。
これはHTMLが完全に読み込まれる前にJavaScriptを実行してしまうと意図せぬ挙動を起こしてしまうことがあるから実装されているわけだ。
なので読み込み終わるまで待ってからfunction()でいろんなイベント登録したり、初期化したりと実装するわけです。

$(document).ready(function(){
  // do something.
});

ところが最近はいろいろと非同期処理で実装したりHTMLをどっかから持ってくる…みたいなことをしないといけないことが多々ある、めっちゃあることと思う。

んでそういうときにこのfunction()内で件のclick()を設定してしまうと非同期で持ってきたHTMLにはイベント登録がされていないのでクリックイベントが発火しなくて「なんでだろーなー？？？」ってなってしまったというお話です。

流れの概略:

1. DOM(=HTML)の読み込みが完了する
2. ready()内の処理が実行される(この時点で存在しているHTMLに対してイベント登録される)
3. 非同期処理とかでどっかからHTML持ってきたり、新しく生成する
4. readyでイベント登録してるからイベント発火するはず、ポチィ！！！→イベント発火しない
5. ぼく「？？？」

だいたいこんな流れです。
でこれを防ぐ…というか根本解決するにあたってclick()でイベント登録していた内容をon()に修正しました。

どう修正したか？というと非常に単純でこれをこうした。

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

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

これで「特定のクラスが指定されたDOM」から「Documentそのもの」に対してイベントが登録されたことになる(はず)。
なので先程の4. readyでイベント登録してるからイベント発火するはず、ポチィ！！！→イベント発火しないでは対象となるDOMの要素が存在しなくてイベントが発火しなかったものが対象が変わるため発火するようになりました

まとめ

両者の具体的な違いというか実行タイミングや対象を柔軟に変更できるという点でon()が優れているのだなとようやく理解した。
このあたりの知識はググってもいまいち思い通りの検索結果にたどり着かなくて「おれたちは雰囲気でon()を書いている」みたいな状態だったんだけど
「もっと綺麗に実装できると思うんだけどどうやるかわからーん！」ってなって同僚に聞いたら即解決したうえにわかりみしかない内容だったので恥ずかしい備忘録として残しておこうと思う。

今回の件でジャバスクリプトちからが1上げることができたっぽい。
自分たちが使う道具を1から10まで知っている必要はないけども最低でも1は知っておこうな！という恥ずかしいお話でした。

おしまい。

参考

• jQueryの基本 - $(document).ready