0

次のコードを使用します。

HTML

<button id="button>click me</button>

JS - バージョン 1

window.onload = init;

function init() {
    console.log('init called');
    var button = document.getElementById('button');
    button.onclick = buttonClickHandler;
}

function buttonClickHandler() {
    console.log('button clicked');
}

vs 同じ HTML

JS - バージョン 2

window.onload = init();

どちらの場合も、'init called' が「すぐに」コンソールに表示されますが、2 番目のケースでは、ボタンが null であることを示すエラーが続きます。

ここでは 2 つのことが行われます。1) バージョン 1 では、DOM がロードされるのを待ちます。2) バージョン 2 では、DOM がロードされる前に発生しているように見えます。

私の質問。バージョン 1 で何が起きているのか、バージョン 2 で何が起きているのかをできるだけ明確に説明してwindow.onload = initくださいwindow.onload = init()。また、各バージョンの動作について説明してください。なぜ 1 は待機するのに 2 は待機しないのですか?

スクリプトはボタン要素の前に配置する必要があります (例: head: http://jsfiddle.net/XMEjr/1/ )。

4

2 に答える 2

9

バージョン 1 は、関数をイベントでinit呼び出される関数に設定します。window.onload関数はその行では呼び出されません。プロパティに (値として) 割り当てられるだけです。

バージョン 2 では、関数の結果がイベントで呼び出されるものに設定されます。それが違いです。initwindow.onload()

どうやらinit関数はonload起動される前に呼び出されます(その結果を取得してonloadハンドラーとして設定するため)。そのため、関数が開始され、buttonid による要素の検索に失敗し (DOM がまだ準備されていないため)、getElementByIdnull が返されます。onclick次に、のプロパティにアクセスしようとするnullと、エラーで停止します。

于 2013-06-01T11:14:56.173 に答える