如何在事件监听器触发时向箭头函数传递参数？

先帮你梳理下代码里的两个小问题：

1. 箭头函数的定义语法有误：const fileUpload = (certificateName) = (evt) => 这个写法是错的，要么调整参数接收方式，要么改成返回内层箭头函数的形式；
2. 直接把fileUpload绑定到事件上时，浏览器只会自动传递event对象，没法主动传入你需要的certificateName参数。

下面给你几个实用的解决方案，按需选就行：

方案1：用箭头函数包装回调，显式传递参数 #

这是最直观的方式，在addEventListener里用一个箭头函数做中间层，调用fileUpload时同时传入certificateName和事件对象evt：

// 获取证书名称（注意：如果这个值可能在事件触发前被修改，建议在回调里重新获取）
let certificateName = document.querySelector('.js--c-name').value;

// 修正后的fileUpload，接收两个参数
const fileUpload = (certificateName, evt) => {
  console.log(`Name of Certificate: ${certificateName}`); // 你原来写的#{...}是语法错误，要改成${}
  const myFile = evt.target.files[0];
  // 后续业务操作...
};

// 绑定事件时用箭头函数包装，手动传参
currentFileInput.addEventListener('change', (evt) => fileUpload(certificateName, evt), false);

方案2：用bind预先绑定参数 #

bind方法可以帮你把固定参数提前绑定到函数上，绑定的参数会排在事件对象前面，所以要调整函数的参数顺序：

let certificateName = document.querySelector('.js--c-name').value;

// 先接收绑定的certificateName，再接收事件对象evt
const fileUpload = (certificateName, evt) => {
  console.log(`Name of Certificate: ${certificateName}`);
  const myFile = evt.target.files[0];
  // 后续业务操作...
};

// 用bind绑定certificateName，返回新函数绑定到事件
currentFileInput.addEventListener('change', fileUpload.bind(null, certificateName), false);

⚠️ 重要提醒：如果certificateName是用户可修改的输入值（比如绑定事件后用户改了输入框内容），上面两种方案里的certificateName会是绑定那一刻的旧值，拿不到最新内容。这种情况更推荐直接在回调里实时获取最新值：

const fileUpload = (evt) => {
  // 每次事件触发时，获取最新的证书名称
  const certificateName = document.querySelector('.js--c-name').value;
  console.log(`Name of Certificate: ${certificateName}`);
  const myFile = evt.target.files[0];
  // 后续业务操作...
};

currentFileInput.addEventListener('change', fileUpload, false);

这样既不用额外传参，还能保证每次拿到的都是最新值，更稳妥。

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