jQueryのイベントの使い方1
よく利用されるイベント
ready
click
toggle
readyイベント
readyイベントはjQueryのイベントの中でももっとも使われるイベントとなる。このイベントはブラウザにDOMが読み込まれた時に実行される。
ブラウザはJavaScriptのコードを検出した時点で実行されるのでhead要素に記述したJavaScriptのコードがbody要素内に宣言しているHTML要素を参照すると、まだ要素が読み込まれていないため見つからないといういうエラーになる。このような不具合を回避するためにreadyイベントを登録してイベントハンドラにコードを記述する。readyイベントはDOMが読み込まれてから実行されるので全てのHTML要素が参照出来るようになる。ただしimg要素に指定されているイメージは読み込まれていないのでイメージのサイズなどは取得出来ない。イメージの幅・高さなどを取得するにはwindow.loadイベントを使用すること。
readyイベントはjQueryイベントでDOMを読み込み終えたら実行される
onloadイベントはJavaScriptに相当し、DOMだけでなく画像等全部読み込み終えたら実行される
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JQueryの勉強2</title>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="msg">
<script type="text/javascript">
$(function() { // jQueryイベント(readyの省略記述)の登録
$('<li><strong>document ready event</strong></li>').appendTo('ol'); //・・・・(1)
$('<li>image width ' + $('img').outerWidth() + 'px</li>').appendTo('ol'); //・・・・(2)
$('<li>image height ' + $('img').outerHeight() + 'px</li>').appendTo('ol'); //・・・・(2)
$(window).load(function() { //window.loadイベントの登録
$('<li><strong>window load event</strong></li>').appendTo('ol'); //・・・・(3)
$('<li>image width ' + $('img').outerWidth() + 'px</li>').appendTo('ol'); //・・・・(4)
$('<li>image height ' + $('img').outerHeight() + 'px</li>').appendTo('ol'); //・・・・(4)
});
});
</script>
<ol></ol>
<img src="img/CK002.jpg" alt="">
</div>
</body>
</html>
使う画像ファイル(各自この画像をDLして使用)
打ち終えたらFirefox・Chrome・IE等のPC環境下にあるブラウザ全てで確認すること。
解説
readyイベント(1)でimg要素のouterWidth()及びouterHight()を取得(2)しても0pxが返ってくることが分かる。これはreadyイベントではまだイメージが読み込まれていないためである。一方、window.loadイベント(3)でimg要素のouterWidth()及びouterHeight()を取得(4)するとwidth300px/height213pxが返ってくる。これでwindow.loadイベントではイメージがロードされていることが分かる。
appendToとは
新しい要素をセレクタで指定した要素内の末尾に追加するメソッド
ここではリスト要素をセレクタで指定したol要素内に追加された。
