如何在Blazor组件中使用纯JavaScript？按钮绑定事件报错排查

问题根源 #

核心问题是你的JS代码执行时机早于Blazor组件的DOM渲染完成时机。外部JS文件在页面加载时就会执行，但Blazor是单页应用，组件是异步渲染的——此时.btn-primary元素还没被渲染到DOM里，document.querySelector返回null，调用addEventListener自然会抛出Cannot read properties of null的错误。

解决方法 #

方法1：借助Blazor生命周期钩子执行JS #

Blazor提供了OnAfterRenderAsync（或OnAfterRender）生命周期方法，这个阶段组件对应的DOM已经完全渲染完成，适合在这里调用JS绑定事件。

• 先修改你的外部JS，把代码封装成可调用的函数：

  window.bindBtnClick = function() {
      const btn = document.querySelector(".btn-primary");
      if (btn) {
          btn.addEventListener("click", () => alert("HE"));
      }
  }
  

• 在Blazor组件中注入IJSRuntime，并在生命周期方法中调用这个JS函数：

  @inject IJSRuntime JS
  
  @code {
      protected override async Task OnAfterRenderAsync(bool firstRender)
      {
          // 只在组件首次渲染完成后执行一次
          if (firstRender)
          {
              await JS.InvokeVoidAsync("bindBtnClick");
          }
      }
  }
  

方法2：直接使用Blazor自带的事件绑定（推荐） #

既然用Blazor开发，优先用框架原生的事件绑定，避免直接操作DOM，代码更简洁也更符合Blazor的开发模式：

<button class="btn-primary" @onclick="HandleBtnClick">点击按钮</button>

@code {
    private void HandleBtnClick()
    {
        // 直接写C#逻辑，或者如果需要JS功能，再通过IJSRuntime调用
        // await JS.InvokeVoidAsync("alert", "HE");
    }
}

方法3：用MutationObserver监听DOM变化（备选） #

如果必须在外部JS中处理，可以使用MutationObserver监听DOM树的变化，当目标元素出现时再绑定事件：

const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
        if (mutation.addedNodes.length > 0) {
            const btn = document.querySelector(".btn-primary");
            if (btn) {
                btn.addEventListener("click", () => alert("HE"));
                observer.disconnect(); // 找到元素后停止监听，避免重复绑定
            }
        }
    });
});

// 监听body下所有子元素的变化
observer.observe(document.body, { childList: true, subtree: true });

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