addEventListener传参报错，是否可直接传入带参函数调用表达式？

addEventListener的第二个参数要求传入可执行的函数对象或者实现了EventListener接口的对象，你当前的写法会立刻执行Exist(existed_username)，将函数的返回值作为参数传入。只要这个返回值不是符合要求的对象/函数，就会抛出你遇到的类型错误。

你可以通过以下几种常见方式给回调传递自定义参数：

• 方式1：外层包裹匿名回调
  直接用匿名函数把带参数的执行逻辑包起来，作为第二个参数传入即可：

  // 普通函数写法
  username.addEventListener('focusout', function() {
    Exist(existed_username);
  });
  
  // ES6+箭头函数简化写法
  username.addEventListener('focusout', () => Exist(existed_username));
  

• 方式2：使用bind方法预先绑定参数
  bind方法会返回一个新的函数，你可以提前把参数绑定到目标函数上：

  // bind第一个参数为函数执行时的this指向，无特殊需求可传null
  username.addEventListener('focusout', Exist.bind(null, existed_username));
  

• 方式3：改造Exist为返回闭包的高阶函数
  你也可以调整Exist的实现，让它接收参数后返回实际处理事件的回调函数：

  function Exist(usernameList) {
    // 返回实际的事件处理函数
    return function(event) {
      // 此处编写原本的Exist校验逻辑，可直接使用传入的usernameList数组
    }
  }
  // 改造后你原本的写法就可以正常运行
  username.addEventListener('focusout', Exist(existed_username));
  

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