JS模块模式下动态生成按钮的onclick函数失效问题及解决

问题场景 #

当使用普通<script>引入JS文件时，点击第一个按钮后动态生成的第二个按钮（带onclick="welcomeMassage()"）能正常调用welcomeMassage函数，控制台打印Hello World!；但将JS文件改为ES模块（.mjs，通过<script type="module">引入）后，点击第二个按钮会提示welcomeMassage is not defined，且控制台无法直接访问该函数。

原因分析 #

普通JS脚本在全局作用域中执行，定义的函数会自动挂载到window对象上，内联事件的代码运行在全局作用域，因此能找到对应的函数。

而ES模块（type="module"）拥有独立的模块作用域，模块内定义的变量、函数不会自动暴露到全局作用域（即不会挂载到window），内联事件的代码无法访问模块内部的函数，所以会出现未定义的错误。

解决方法 #

方法1：使用事件委托（推荐） #

利用事件冒泡机制，在父元素上绑定事件，通过判断触发元素来执行对应逻辑，避免内联事件和全局作用域的依赖。

修改script.mjs代码：

const buttonUser = document.querySelector("button");
const divUser = document.querySelector("div");

buttonUser.addEventListener("click", () => {
    divUser.innerHTML = `
        <h1> welcome to the page </h1> 
        <button class="btn-second"> click me 2 </button>
    `;
});

// 给div绑定事件委托
divUser.addEventListener("click", (e) => {
    if (e.target.classList.contains("btn-second")) {
        welcomeMassage();
    }
});

function welcomeMassage() {
    console.log("Hello World!");
}

方法2：将函数显式挂载到window对象 #

如果必须使用内联事件，可以手动把模块内的函数挂载到全局的window对象上，让内联代码能访问到：

修改script.mjs代码：

const buttonUser = document.querySelector("button");
const divUser = document.querySelector("div");

buttonUser.addEventListener("click", () => {
    divUser.innerHTML = `
        <h1> welcome to the page </h1> 
        <button onclick="welcomeMassage()"> click me 2 </button>
    `;
});

function welcomeMassage() {
    console.log("Hello World!");
}

// 显式挂载到window
window.welcomeMassage = welcomeMassage;

方法3：动态创建元素并直接绑定事件 #

不使用innerHTML拼接HTML，而是通过DOM API创建元素，直接给元素绑定事件，这样事件处理函数能直接访问模块作用域内的函数：

修改script.mjs代码：

const buttonUser = document.querySelector("button");
const divUser = document.querySelector("div");

buttonUser.addEventListener("click", () => {
    const h1 = document.createElement("h1");
    h1.textContent = "welcome to the page";
    
    const secondBtn = document.createElement("button");
    secondBtn.textContent = "click me 2";
    // 直接绑定事件
    secondBtn.addEventListener("click", welcomeMassage);
    
    divUser.innerHTML = ""; // 清空原有内容
    divUser.appendChild(h1);
    divUser.appendChild(secondBtn);
});

function welcomeMassage() {
    console.log("Hello World!");
}

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