JavaScript模块中生成同功能不同坐标值按钮的问题

我想生成一个按钮网格，每个按钮点击时调用同一个函数并传入对应坐标。普通JS文件里这么写没问题，但在JavaScript Module环境下点击按钮会提示logCoordinate函数未定义。

原代码如下：

let div = document.getElementById("divId");
let innerHtml = "";

for(var i = 0; i < 2; i++){
  for(var k = 0; k < 2; k++){
  let coordinate = JSON.stringify({x:k, y:i});
  let button = "<button id:'"+coordinate+"'  onclick ='logCoordinate("+coordinate+")'> "+coordinate+" </button>";
  innerHtml += button;
  }
}
div.innerHTML = innerHtml;

function logCoordinate(coordinate){
 console.log(coordinate);
}

问题原因 #

ES模块中的变量和函数默认不会挂载到全局作用域，而通过innerHTML设置的onclick属性是在全局作用域下查找函数的，因此会触发"函数未定义"的错误。

解决方案 #

方法1：使用事件委托

利用事件冒泡特性，给父元素绑定单个点击事件，通过判断目标元素处理逻辑：

const div = document.getElementById("divId");
let innerHtml = "";

for(let i = 0; i < 2; i++){
  for(let k = 0; k < 2; k++){
    const coordinate = JSON.stringify({x:k, y:i});
    // 用data属性存储坐标数据
    innerHtml += `<button data-coord="${coordinate}"> ${coordinate} </button>`;
  }
  innerHtml += "<br>";
}
div.innerHTML = innerHtml;

// 给父容器绑定点击事件
div.addEventListener('click', (e) => {
  if(e.target.tagName === 'BUTTON'){
    const coordinate = JSON.parse(e.target.dataset.coord);
    logCoordinate(coordinate);
  }
});

function logCoordinate(coordinate){
  console.log(coordinate);
}

方法2：直接创建DOM元素并绑定事件

放弃字符串拼接innerHTML，通过DOM API创建按钮，直接绑定点击事件（可直接访问模块内函数）：

const div = document.getElementById("divId");

for(let i = 0; i < 2; i++){
  const rowContainer = document.createElement('div');
  for(let k = 0; k < 2; k++){
    const coordinate = {x:k, y:i};
    const button = document.createElement('button');
    button.textContent = JSON.stringify(coordinate);
    // 闭包保存当前循环的坐标值，直接绑定事件
    button.addEventListener('click', () => {
      logCoordinate(coordinate);
    });
    rowContainer.appendChild(button);
  }
  div.appendChild(rowContainer);
}

function logCoordinate(coordinate){
  console.log(coordinate);
}

方法对比 #

• 事件委托适合大量元素场景，仅需绑定一个事件，性能更优。
• 直接创建DOM元素的方式更直观，避免字符串拼接带来的潜在XSS风险和语法错误。

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