在一个简单的场景中，DOMContentLoaded 不像 $(document).ready()答案

【问题标题】：DOMContentLoaded not working like $(document).ready() in a simple scenario在一个简单的场景中，DOMContentLoaded 不像 $(document).ready()
【发布时间】：2016-11-13 16:43:38
【问题描述】：

在我的 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 est，将最后三行更改为以下行：

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

这看起来很基本，但我不明白为什么准备好的纯 javascript 版本的文档在这里不起作用...

非常感谢！

【问题讨论】：

标签： javascript jquery angular webpack

【解决方案1】：

不一样

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

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

【讨论】：