DOMContentLoadedが単純なシナリオで$（document）.ready（）のように機能しない

Question

Angular2アプリ用のWebパックアセットバンドルのメインファイルで、DOMContentLoadedイベントをリッスンできません。
ファイルだけであり、次の行：

$(document).ready(function() { 
    console.log('Hola!'); 
}); 

：一方

// styles 
const bootstrapLoader = require('bootstrap-loader'); 
const styleScss  = require('./main.scss'); 
// scripts 
const $    = require('jquery'); 
const jQueryUjs  = require('jquery-ujs'); 
const coreJS   = require('core-js'); 
const zoneJS   = require('zone.js'); 
const reflectMetadata = require('reflect-metadata'); 
const myAngularApp = require('./main.ts'); 

document.addEventListener('DOMContentLoaded', function() { 
    console.log('Hola!'); 
}); 

私はjQueryのを使用している場合、それは次のようなもので、最後の3行を変更し、完全IDのESTの作品

これは基本的に見えますが、ドキュメントの準備ができているプレーンなJavaScriptのバージョンがここで動作しない理由を理解できません...

多くの感謝！

Answer 1

それは同じ

https://api.jquery.com/ready/

ほとんどのブラウザは、DOMContentLoadedイベントの形で同様の機能を提供していません。しかし、jQueryの.ready（）メソッドは重要かつ有用な点で異なります。コードが.ready（ハンドラ）を呼び出す前にDOMが準備完了になり、ブラウザがDOMContentLoadedを起動すると、関数ハンドラは引き続き実行されます。対照的に、イベント発生後に追加されたDOMContentLoadedイベントリスナーは決して実行されません。