onclick事件在元素未点击时提前触发的原因及替代解决方案

现象成因 #

onclick事件监听器要求被赋值为函数引用，而非函数执行后的返回值。
原始代码书写为onclick = makeSizer(14)时，JavaScript引擎会在代码执行（也就是页面加载）阶段直接调用makeSizer(14)获取返回值，再将返回值赋值给onclick属性，因此页面加载完成后就会立即执行alert和修改字体大小的逻辑。而原始版本的makeSizer没有定义返回值，默认返回undefined，后续用户实际点击元素时也不会触发任何预期逻辑。

其他可行解决方案 #

除了你提到的闭包返回函数的方案外，还有以下几种常用实现：

• 匿名函数包裹调用
  赋值时在外层嵌套一层匿名函数，将makeSizer的调用逻辑放到匿名函数内部，仅当点击事件触发、匿名函数被执行时，才会调用makeSizer：

  document.getElementById('size-12').onclick = function() {
    makeSizer(14);
  };
  document.getElementById('size-14').onclick = function() {
    makeSizer(16);
  };
  

• 使用bind方法绑定参数
  Function.prototype.bind会创建一个新的函数实例，调用该实例时会以绑定的参数执行原函数，且不会立即触发原函数执行：

  document.getElementById('size-12').onclick = makeSizer.bind(null, 14);
  document.getElementById('size-14').onclick = makeSizer.bind(null, 16);
  

• 箭头函数简化写法（ES6+环境支持）
  逻辑和匿名函数方案完全一致，写法更简洁：

  document.getElementById('size-12').onclick = () => makeSizer(14);
  document.getElementById('size-14').onclick = () => makeSizer(16);
  

• 事件委托批量处理
  给所有调节按钮添加统一的类名，用自定义属性存储目标字号，在父元素上统一绑定监听事件，避免逐个绑定的冗余逻辑：

  <!-- HTML 修改 -->
  <p>Some paragraph text</p>
  <a href="#" class="size-toggle" data-size="14">12</a>
  <a href="#" class="size-toggle" data-size="16">14</a>
  

  // 对应JS逻辑
  document.body.addEventListener('click', function(e) {
    if (!e.target.classList.contains('size-toggle')) return;
    const targetSize = e.target.dataset.size;
    alert(targetSize);
    document.body.style.fontSize = targetSize + 'px';
  });
  

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