为何JavaScript的onload事件无法生效？代码调试求助

你遇到的核心问题是：load事件属于window对象，而非<body>元素。

当使用<body onload="checkCookies()">时，浏览器做了特殊处理——自动把这个属性对应的函数绑定到window的load事件上，因此页面加载完成后能正常触发。但直接给<body>元素通过addEventListener绑定load事件时，这个事件永远不会被触发，因为<body>本身不会派发load事件。

有两种可靠的修复方式：

方式一：绑定到window的load事件 #

把绑定事件的代码改为针对window对象，效果和<body onload>完全一致，会等待整个页面（包括图片、样式等所有资源）加载完成后执行：

<!DOCTYPE html>
<html>
<body id="myBody">
<h1>HTML DOM Events</h1>
<h2>The onload Event</h2>

<p id="demo"></p>

<script>
// 绑定到window对象的load事件
window.addEventListener("load", checkCookies);
function checkCookies() {
  var text = "This page ";
  if (navigator.cookieEnabled == true)
  {
    text = "Cookies are enabled.";
  } 
  else
  {
    text = "Cookies are not enabled.";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

方式二：使用DOMContentLoaded事件（推荐） #

如果不需要等待图片、样式表等外部资源加载完成，只需要DOM结构渲染完毕就执行代码，可以使用document的DOMContentLoaded事件，触发时机比load更早，性能更优：

<!DOCTYPE html>
<html>
<body id="myBody">
<h1>HTML DOM Events</h1>
<h2>The onload Event</h2>

<p id="demo"></p>

<script>
// DOM结构加载完成就执行
document.addEventListener("DOMContentLoaded", checkCookies);
function checkCookies() {
  var text = "This page ";
  if (navigator.cookieEnabled == true)
  {
    text = "Cookies are enabled.";
  } 
  else
  {
    text = "Cookies are not enabled.";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

• window.load：触发时机是整个页面（包括所有外部资源：图片、视频、样式表等）加载完成后。
• document.DOMContentLoaded：触发时机是HTML文档解析完成、DOM结构构建完毕，无需等待外部资源加载。

内容的提问来源于stack exchange，提问作者Onwubiko Jedidiah Solomon