【HTML】イベント順序【Javascript】
2011-08-06 11:46:01 Sat
今更という感じもしますが、
HTMLドキュメントがロードされるときに実行されるイベントの順序について調べてみたのでメモ。
試していないから否定できない可能性はブラウザとHTTPサーバの組み合わせによってイベントの実行順序が変わるかもしれません。
なので実行環境は次のとおりです。
windows7 ultimate
apache 2.2
chrome 13
○index.html
○eventtest.js
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するというこんなやり方もあるようですが…。
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');
});
コンソールログ
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するというこんなやり方もあるようですが…。
