<script async="">先で、document.addEventListener("DOMContentLoaded", load, false);するとうまくいかない

下記で、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);