DOMContentLoadedイベントのイベントターゲットを調べる
document.addEventListener('DOMContentLoaded', ...)という記述と
window.addEventListener('DOMContentLoaded', ...)という記述を見たので、どっちが正しいのだろうと思い、チェック用のHTML+jsを作成。
結果は、(IEを除く)どのブラウザでもdocumentがイベントターゲットとなっていた。IEはそもそもW3C DOMイベントモデルじゃないのでDOMContentLoadedをサポートしておらず問題外。
テスト環境
OS : Windows Vista SP2
Web Browser : Chrome 7.0.517.44 / Opera 10.63 / Firefox 3.6.12 / IE 8.0.6001.18975IC
テスト用コード (HTML+js)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>DOMContentLoaded タイミングチェック</title> <script type="text/javascript"> <!-- var params = [ { name : 'window', target : window, type : 'load' }, { name : 'window', target : window, type : 'DOMContentLoaded' }, { name : 'document', target : document, type : 'load' }, { name : 'document', target : document, type : 'DOMContentLoaded' } ]; var eventPhaseStr = { 1 : 'CAPTURING_PHASE', 2 : 'AT_TARGET', 3 : 'BUBBLING_PHASE' } /** console.log, console.warnがない場合は適当なログ出力処理で代用 */ if( !window.console ){ window.console = {}; if( window.opera ){ console.log = function(msg){ window.opera.postError(msg); }; console.warn = function(msg){ console.log('WARNING: ' + msg); }; }else{ console.log = function(msg){ alert(msg); }; console.warn = function(msg){ console.log('WARNING: ' + msg); }; } } function makeListener(name) { return function(e){ console.log(name + ', ' + e.type + ', ' + eventPhaseStr[e.eventPhase]); }; } function AddEventListener(element, type, listener, useCapture) { if( element.addEventListener ){ element.addEventListener(type, listener, useCapture); }else if( element.attachEvent ){ console.warn('attachEvent used'); element.attachEvent('on' + type, listener); }else{ console.warn('event-handler used'); element['on' + type] = listener; } } console.log('TARGET, TYPE, EVENT_PHASE'); for( var i=0, l=params.length; i < l; i++ ) { var e = params[i]; AddEventListener(e.target, e.type, makeListener(e.name), false); AddEventListener(e.target, e.type, makeListener(e.name), true); } //--> </script> </head> <body> <h1 style="text-align : center">DOMContentLoaded タイミングチェック</h1> </body> </html>
テストした全ブラウザでconsole.log, console.warnの両方が使えた。いつからIEとOperaには用意されているんだろう・・・