0

下記で、asyncを削除するとうまくいくのですが、そのままだとノーリアクションです
・何故でしょうか?
・「非同期でHTML解釈終了時に呼び出されるイベント」という考え方がおかしいのでしょうか?
・仮にasyncを残すとしたら、「document.addEventListener("DOMContentLoaded"」は不要でしょうか?
・両者の違い(使い分け方)が良く分かりません


<script async="" src="hoge.js"></script>

hoge.js

function test() { 
  var el = document.getElementById("piyo"); 
  el.addEventListener("keydown", function(){
    console.log(this);
  }, false);
} 
document.addEventListener("DOMContentLoaded", test, false);

1 件の回答 1

2

async は、「スクリプトのロードで本体HTMLのパーズをブロックしない」「スクリプトのロードが終わったら実行される」という挙動です。スクリプト実行時にHTMLのパーズは終わっているかもしれませんし、終わっていないかもしれません。このコードでasyncを使いたいのでしたら、「document.readyState"loading" の場合は DOMContentLoadedtest を登録、それ以外は test を即実行。」となるでしょう。

欲しい挙動は async ではなく defer ではないでしょうか。

3
  • deferが分からないのですが、挙動的には「window.onload」と「jQueryの$(document).ready」の何れに近いのでしょうか? 何れもHTMLパーズ終了後に実行される? 画像読込は待つのでしょうか?
    – re9
    Commented 2016年6月24日 3:39
  • わからない場合は規格を読むといいです。html.spec.whatwg.org/multipage/scripting.html#attr-script-defer 。defer は ready 相当です。画像などサブリソースは待ちません。
    – int32_t
    Commented 2016年6月24日 4:49
  • リンク提示ありがとうございました。こんな分かりやすい図が掲載されていたのですね。参考になりました
    – re9
    Commented 2016年6月24日 5:36

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。