Button绑定onload事件不触发，如何实现按钮加载时调用test函数？

核心问题原因 #

<button> 元素本身不支持 onload 事件，仅 body、img、script、iframe 这类需要加载外部资源的元素会触发load事件，因此你写在按钮属性里的onload完全不会生效。

可行实现方案 #

以下方案均无需绑定交互类事件即可实现按钮加载后自动触发函数：

• 方案1：监听全局DOM加载完成事件
  适合按钮是页面初始渲染的场景，等页面所有DOM解析完成后匹配目标按钮执行函数：

  document.addEventListener('DOMContentLoaded', function() {
    // 建议给按钮加唯一id，用#id选择器定位更精准，避免匹配到其他同class按钮
    const targetBtn = document.querySelector('button.btn-warning');
    if(targetBtn) {
      test();
      // 若test函数需要操作按钮实例，可直接传参 test(targetBtn)
    }
  })
  
  function test() {
      console.log("I am in");
  }
  

• 方案2：按钮后紧跟内联脚本
  若允许修改HTML结构，直接在按钮代码后加一行短脚本即可，浏览器按顺序解析HTML，解析到脚本时按钮已经渲染完成：

  <button type="button"
    title="Previous value:"
    class="btn btn-warning mb-2" style="padding: 4px 8px 4px 8px; border-radius: 1rem;">
   <i class="fas fa-exclamation-triangle text-white"></i>
  </button>
  <script>test()</script>
  

• 方案3：监听DOM变化适配动态渲染场景
  若按钮是页面加载后动态插入的（比如异步请求渲染、组件动态挂载），用MutationObserver监听DOM变化，检测到按钮插入时自动执行函数：

  const observer = new MutationObserver(function(mutations) {
    const targetBtn = document.querySelector('button.btn-warning');
    if(targetBtn) {
      test();
      // 执行后停止监听避免重复触发
      observer.disconnect();
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
  
  function test() {
      console.log("I am in");
  }
  

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