在简单的场景中，DOMContentLoaded不像$(document).ready()那样工作

Question

在我为Angular2应用程序编写的webpack资产包的主文件中，我无法收听DOMContentLoaded事件。

该文件只有以下几行：

// 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，它工作得很好，id，用下面的行修改最后三行：

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

这看起来如此基本，但我不明白为什么简单的javascript版本的文档准备在这里不起作用.

非常感谢！

Answer 1

不一样

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

大多数浏览器以DOMContentLoaded事件的形式提供类似的功能。但是，jQuery的.ready()方法在一种重要和有用的方法上有所不同:如果DOM准备就绪，浏览器在代码调用.ready(处理程序)之前触发DOMContentLoaded，则函数处理程序仍将被执行。相反，从未执行事件触发后添加的DOMContentLoaded事件侦听器。