onclick生效但onload无效的原因及二者功能差异咨询

一、功能差异 #

• onclick：属于鼠标交互事件，当用户点击绑定该事件的元素时触发，几乎所有HTML元素都支持这个事件，只要元素能被点击（哪怕是纯文本元素），绑定的函数就会执行。
• onload：属于资源加载事件，仅针对特定类型元素触发——比如<body>、<img>、<script>、<iframe>这类需要加载外部资源或作为页面/资源容器的元素。它的触发时机是元素自身及依赖的外部资源完全加载完成时，比如图片加载完毕、脚本执行完成、整个页面加载结束。

二、为什么<strong>绑定onload无效 #

<strong>是纯文本渲染类的行内元素，它不需要加载任何外部资源，也不在HTML规范定义的onload事件支持元素范围内。浏览器不会为这类仅负责文本样式的元素触发onload事件，所以你绑定的toPriceFormat(this)根本不会被执行。

三、正确实现：页面加载完成后自动格式化价格 #

如果要在元素加载完成后自动格式化，不需要给每个元素单独绑定事件，而是在页面DOM结构就绪后批量处理，推荐两种方式：

方式1：用DOMContentLoaded事件监听 #

<script>
function toPriceFormat(x) {
  let initText = parseInt(x.innerText);
  const newTextFormat = new Intl.NumberFormat().format(initText);
  x.innerText = newTextFormat;
}

// 页面DOM结构加载完成后执行批量处理
document.addEventListener('DOMContentLoaded', function() {
  const priceElements = document.querySelectorAll('.price');
  priceElements.forEach(el => toPriceFormat(el));
});
</script>

方式2：将脚本放在页面底部 #

把脚本放在</body>标签前，此时页面所有DOM元素已经渲染完成，直接执行处理逻辑即可：

<body>
  <strong class="price">2000</strong>
  <strong class="price">3000</strong>
  <strong class="price">1000</strong>

  <script>
    function toPriceFormat(x) {
      let initText = parseInt(x.innerText);
      const newTextFormat = new Intl.NumberFormat().format(initText);
      x.innerText = newTextFormat;
    }

    // 直接批量处理元素
    const priceElements = document.querySelectorAll('.price');
    priceElements.forEach(el => toPriceFormat(el));
  </script>
</body>

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