JavaScript中onload函数失效：页面加载时自动调用随机名言API失败

你遇到的问题核心是错误地将onload事件绑定到了按钮元素上——普通按钮元素并不会触发onload事件，这个事件主要用于window、document或者图片/脚本这类资源型元素，所以你的绑定代码根本不会被触发。

下面给你几种可行的解决方案，按推荐程度排序：

方案1：使用DOMContentLoaded事件（推荐） #

这个事件会在DOM树完全构建完成后立即触发（不需要等待图片、样式表等外部资源加载完毕），非常适合初始化页面内容：

// 页面DOM加载完成后自动调用loadData
document.addEventListener('DOMContentLoaded', loadData);
// 点击按钮时调用loadData
document.getElementById('getQuote').addEventListener('click', loadData);

function loadData() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://talaikis.com/api/quotes/', true);
  xhr.onload = function() {
    if (this.status === 200) {
      const data = JSON.parse(this.responseText);
      // 生成随机索引获取名言
      const randomIdx = Math.floor(Math.random() * data.length);
      const randomQuote = data[randomIdx];
      // 假设你有名言文本和作者的DOM元素
      document.getElementById('quoteContent').textContent = randomQuote.quote;
      document.getElementById('quoteAuthor').textContent = `— ${randomQuote.author}`;
    }
  };
  xhr.send();
}

方案2：直接在脚本末尾调用函数 #

如果你的脚本标签放在HTML的</body>标签之前（也就是DOM元素都已经被解析完成的位置），可以直接在函数定义后调用loadData()，省去事件绑定：

<!-- 页面其他内容 -->
<button id="getQuote">获取新名言</button>
<div id="quoteContent"></div>
<div id="quoteAuthor"></div>

<script>
document.getElementById('getQuote').addEventListener('click', loadData);

function loadData() {
  // 你的XHR请求和DOM更新代码
}

// 页面加载时直接执行
loadData();
</script>
</body>

方案3：使用window.load事件 #

这个事件会在所有页面资源（包括图片、样式表等）加载完成后触发，适合依赖外部资源的初始化场景，但比DOMContentLoaded触发晚：

window.addEventListener('load', loadData);
document.getElementById('getQuote').addEventListener('click', loadData);

// 你的loadData函数

为什么原来的代码无效？ #

你写的document.getElementById('load').addEventListener('onload', loadData);存在两个问题：

1. 普通按钮元素没有onload事件，只有像<img>、<script>这类加载外部资源的元素才会触发该事件；
2. 使用addEventListener时，事件名不需要加on前缀，正确写法是addEventListener('load', ...)（不过即使改了前缀，按钮也不会触发这个事件）。

内容的提问来源于stack exchange，提问作者Amrendra Nath