スポンサーリンク
スポンサーリンク

処理のタイミングを決めるイベントについて

jQuery

jQueryを使ったコードは、セレクターで特定の
HTML要素を指定して、CSSやHTMLを変更・追加・削除をします。
これまでは、HTMLファイルをブラウザで開いたときに処理が
実行されるものでした。

ですが、世に溢れているウェブサイトを眺めていると
こちらが何かをしたときに、何らかのアクションを
ブラウザが返すという物があります。

簡単に言うと、
何かをきっかけにして、HTML、CSSが変更されていることが
分かります。その何かが実行されるきっかけのことを
イベントといいます。

HTMLが読み込まれたタイミングで実行するready()

「処理が実行される」タイミングは、クリックや、マウスオーバーを
したときだけではないです。「ブラウザーが、Webページの読込みを完了した」と
いうのもイベントです。

今までのサンプルコードでも出てきています。

$(document).ready(function(){
//HTMLが読み込まれた実行する処理
});
こんな表記です。

$(function(){
//HTMLが読み込まれた実行する処理
});

と書いてあるのもあります。どちらも処理は一緒です。

ready()は「HTMLファイルの読み込みが完了」というイベントを
拾ってくる命令です。ready()の左側に、セレクター$(document)と
書いて、WEBページ全体(document)を対象にしています。

今まで、サンプルコードにお決まりように書いていたのには
意味があります。$(function(){…}は
「WEBページ全体の読み込みが完了し、準備が
できたら{…}の処理を実行する」
という命令を
表しています。

ready(…)の括弧にはfunction(){…}と書き、その内側に
実行したい実際の処理を書きます。括弧内にfunction(){…}と
書くのは、イベントを感知して処理をするときの決まりです。

$(セレクター).イベント(function(){ $(セレクター).命令 });

他のイベント処理でもready()は必要です!

ready()はイベントを感知する命令ですが、他のイベントを
感知したい場合にも、$(function(){…}の内側に処理の内容を記述します。

例を挙げると「img要素がクリックされたら処理を行う」という
スクリプトです。下記のclick()は「特定の要素がクリックされたら」と
いうイベントを感知する命令です。

<script> $(“img”).click(function(){     img要素がクリックされたときに実行したい処理を書く。 }); </script>

上記のscript要素をhead要素内に書いた場合、ブラウザは
ページの読み込みが終わっていません。
なので、
img要素をブラウザがまだ認識できていません。そこで
下記のようにスクリプト全体を$(function(){…})の内側に
入れます。

<script> $(function(){     $(“img”).click(function(){         img要素がクリックされたときに実行したい処理を書く。     }); }); </script>

上記のようにすることで、ブラウザーはscript要素の記述場所に
関係なくimg要素を認識でき、処理はページの読み込みが完了した後に
実行されます。

$(function(){…})を使えば、img要素がクリックされたタイミングで
実行したい処理を指定できます。jQueryを使うときには、
$(function(){…})の内側に処理を記述することを忘れないように
しましょう。

コメント

タイトルとURLをコピーしました