表单提交时如何获取触发点击的目标按钮

最近碰到个挺常见的表单按钮问题，相信很多人都遇到过：

我的表单结构里有上传/删除按钮，点击按钮会提交表单并触发事件，但e.target.nodeName显示的是FORM而非我点击的按钮，没法确定操作的是上传还是删除，也就没法正确处理对应的图片和FormData。

我折腾了一会儿，整理出几个靠谱的解决办法，分享给大家：

方法1：直接给按钮绑定点击事件（最直观） #

别在表单上监听submit事件，直接给每个操作按钮绑定点击事件，这样e.target就肯定是按钮本身了。记得要阻止默认的表单提交行为，自己用AJAX处理：

// 假设按钮有区分操作的data-action属性
document.querySelectorAll('[data-action]').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止表单默认提交
    const form = this.closest('form'); // 获取所在表单
    const formData = new FormData(form);
    const actionType = this.dataset.action; // 拿到上传/删除的标识

    if (actionType === 'upload') {
      // 这里写上传图片的AJAX请求逻辑
      console.log('执行上传操作');
    } else if (actionType === 'delete') {
      // 这里写删除图片的AJAX请求逻辑
      console.log('执行删除操作');
    }
  });
});

对应的HTML可以给按钮加属性：

<form>
  <!-- 图片输入框等表单元素 -->
  <button type="submit" data-action="upload">上传图片</button>
  <button type="submit" data-action="delete">删除图片</button>
</form>

方法2：利用表单submit事件的e.submitter属性 #

现代浏览器的表单submit事件里，提供了e.submitter这个属性，直接就能拿到触发提交的按钮！这是最简洁的方式：

document.querySelector('your-form-selector').addEventListener('submit', function(e) {
  e.preventDefault();
  const clickedButton = e.submitter;
  
  if (!clickedButton) return; // 防止非按钮触发的提交
  
  const actionType = clickedButton.dataset.action;
  const formData = new FormData(this);

  // 根据操作类型处理AJAX请求
  if (actionType === 'upload') {
    // 上传逻辑
  } else if (actionType === 'delete') {
    // 删除逻辑
  }
});

注意：e.submitter在IE浏览器不支持，如果不需要兼容IE，这个方法首选！

方法3：通过按钮的name属性区分 #

给两个按钮设置相同的name属性，不同的value值，提交时FormData里会自动包含这个按钮的name和value，我们可以直接从FormData里取出来判断：

<form>
  <!-- 其他表单元素 -->
  <button type="submit" name="operation" value="upload">上传图片</button>
  <button type="submit" name="operation" value="delete">删除图片</button>
</form>

document.querySelector('your-form-selector').addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  const operation = formData.get('operation');

  if (operation === 'upload') {
    // 上传AJAX请求
  } else if (operation === 'delete') {
    // 删除AJAX请求
  }
});

内容的提问来源于stack exchange，提问作者Bruno Luiz K.