26607


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

* * *
[code]

    <script async="" src="hoge.js"></script>
    
[/code]

hoge.js

[code]

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


CC BY-SA 3.0
2016-06-10T02:39:54.167
26603
2016-06-10T04:36:25.257
7886
question
javascript
<script async="">先で、document.addEventListener("DOMContentLoaded", load, false);するとうまくいかない


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

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


CC BY-SA 3.0
2016-06-10T04:36:25.257
26607
2016-06-10T04:36:25.257
3475
26603
answer