FC2ブログ

スポンサーサイト

-------- --:--:-- --

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【HTML】イベント順序【Javascript】

2011-08-06 11:46:01 Sat

今更という感じもしますが、
HTMLドキュメントがロードされるときに実行されるイベントの順序について調べてみたのでメモ。
試していないから否定できない可能性はブラウザとHTTPサーバの組み合わせによってイベントの実行順序が変わるかもしれません。
なので実行環境は次のとおりです。

実行環境


windows7 ultimate
apache 2.2
chrome 13

HTMLとJavascript



○index.html

<!DOCTYPE html> 
<html lang="ja"> 

<head>
<meta charset="utf-8">
<title>event test</title>
<script type="text/javascript" src="./common/js/jquery.js"></script>
<script type="text/javascript" src="./common/js/eventtest.js"></script>
<script type="text/javascript">
console.log('head');
function init(){
console.log('body onload');
console.log(window.onload);
}
</script>
</head>

<!--<body>-->
<body onload="init();">

<script type="text/javascript">
console.log('body');
</script>

hoge
</body>

</html>


○eventtest.js

console.log('js naked');

window.onload = function(){ console.log('window.onload'); }

$(document).ready(function() {
console.log('$(document).ready');
});

$(function(){
console.log('$(document).ready shortcut');
});



WS000165.jpg


コンソールログ



js naked
head
body
$(document).ready
$(document).ready shortcut
body onload
function onload(event) {
init();
}


bodyタグに記述したonload と javascriptファイルに記述したwindow.onloadは同一プロパティのようで上書きされるようです。
ためしにbody onload を記述して window.onload も記述したとき、 window.onloadの中身はbody onloadのinit関数への参照値となっていました。
body onloadを記述しない場合、window.onloadが上記の「body onload」のタイミングで実行されます。

また別記事にするつもりですが、
document.getElementByIdで要素を操作できるようになるのは「$(document).ready」以降となります。
「js naked」のタイミングでImageファイルをnewし、onloadした際には、onloadのコールバックファンクションではdocument.getElementByIdで要素を操作できるようです。


HTMLの要素にヘッド内などでどうしてもアクセスしたいという場合、javascriptでcreateElementするというこんなやり方もあるようですが…。
スポンサーサイト

⇒comment

Secret

名言集
全記事(数)表示
全タイトルを表示
ブログ内検索
Loading
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。