まずはredy関数のおさらいです。ready関数については「HTML文書の読み込みが終わった時に実行される関数」というように説明されていることが多いですね。

画像とかがまだ読み込みが終わってなくても、文書構造自体が読み込めた時点でイベントが発火します。

jQueryを用いると次のような感じで書けるやつです。

$(document).ready(function() {
 alert('Hello!');
});
//または
$(function(){
 alert('Hello!');
});

これをjQueryを使用せずに書くと、

document.addEventListener("DOMContentLoaded", function(){
 alert('Hello!');
});

となるようです。なんか長ったらしいですね。

さて、何が起こっているのか？

これを理解するにはまずはDOMというものを理解しないといけないようです。

DOMのまとめ

Window オブジェクトや Document オブジェクト、DOMなど

上記の2つを読めば大体わかると思います。

DOMについて大体イメージが掴めたと仮定して話を進めますが、先程のjQueryを使用せずに書いたready関数をもう一度見てみましょう。

document.addEventListener("DOMContentLoaded", function(){...});

これはつまり、DOMのdocumentオブジェクトのDOMContentLoadedイベント対してイベントリスナを追加するよ、ってことになります。

document.addEventListener('イベント名', 呼び出す関数);

と記述することで、documentの’イベント名’が発生したときに、呼び出す関数を追加することができます。

今、指定しているのは’DOMContentLoaded’というイベントですので、「documentオブジェクトが読み込まれた」時にイベントリスナを追加しています。

jQueryでとりあえず$(function(){});で囲んでいた処理は、このイベントが発生したときに呼び出されていたんですね。

クリックされたときに何かしらの処理を加えたい時、jQueryではclick()関数などを使用しますよね。

実はこれもready関数と同様に、addEventListenerでクリックイベントに対してイベントリスナを追加しているというのが正体です。

ではなぜclick関数はready関数の中に含めて記述するのかというと、

$('対象の要素').click();

というはdocumentオブジェクトの中からclickイベントの対象とする要素（エレメント）を見つけて、そのエレメント自体に対してイベントリスナを追加するものです。

つまり、ready関数の外にclick関数を記述するとdocumentが読み込まれてない時点でその要素を探してしまうので、エレメントがnullになってしまいます。

もしready関数の外からでもclickイベントにイベントリスナを追加したい場合、ｊQueryでは次のように記述することもできます。

$(document).on('click', function(){...});

この記述にすると、documentオブジェクト自体を対象にしています。中身が読み込まれていなくてもdocumentというオブジェクト自体は存在しているので、ready関数の外でもdocumentオブジェクト自体へのクリックイベントリスナは無事に追加できるのです。

また、Ajaxなどで後から読み込んだ要素にclick()関数が動作しないのも似たような理由からになります。

ready関数にちゃんと記述していたとしても、documentオブジェクトが読み込まれた時点ではまだAjaxコンテンツは存在しません。なので、イベントリスナが正常に追加できないのです。

Ajaxコンテンツに対しても、$(document).on(…)ならば有効になります。

理由は、もうお分かりかと思いますので割愛しますね。

いかがだたったでしょうか。

JavaScriptというものが少し理解できた気がします。まだまだ熟知しているわけではないので、解釈の仕方が間違っているかもしれません。

もしおかしなことを言っているなと気づいた方はどうぞお問合せフォームより一喝くださいませ。