addEventListener事件绑定中何时需为回调函数传入event参数？

首先先纠正你示例代码里的笔误：标准DOM API是小写开头的addEventListener，你写的大写A开头的AddEventListener会直接报找不到方法的错误。

核心逻辑 #

你传给addEventListener的第二个参数是事件回调，这个函数从来不是你手动调用的，是事件触发时浏览器自动执行的。浏览器执行这个回调的时候，会自动把一个打包了本次事件所有信息的Event对象作为第一个参数传入。
你在函数定义里写的event只是个普通形参，名字随便取（叫e/ev/event都可以，没有特殊语法要求），作用就是接住浏览器传进来的这个对象；你不写这个形参，浏览器也还是会传这个参数，只是你在函数内部拿不到它而已。

你示例里用event的必要性 #

你写的keyup监听逻辑，需要拿到输入框里的当前值，这个值存在事件对象的target属性上——event.target就是实际触发本次事件的DOM元素，也就是你绑定事件的那个输入框，只有拿到这个对象，才能读取它的value属性拿到用户输入的内容，进而转成小写做后续处理。

核心规则说明 #

• 参数传递时机：不存在你手动传event的环节。只要你绑定的事件被触发（比如keyup事件就是用户在输入框内松开按键的瞬间），浏览器就会自动把打包好的事件对象传入回调，同步执行回调里的逻辑。
• 什么时候需要写形参接event：
  只要你的回调逻辑需要用到本次事件的相关信息，就写形参接收；完全不需要事件相关信息的时候，可以省略不写。
  • 不需要event的典型场景：比如按钮点击后固定弹出"提交成功"提示，逻辑和事件本身的信息无关：

    const submitBtn = document.querySelector('#submit')
    submitBtn.addEventListener('click', function() {
      alert('提交成功')
    })
    

  • 必须接收event的典型场景：
    • 需要获取触发事件的DOM元素：比如输入框取值、事件委托场景下判断点击的子元素
    • 需要获取事件专属属性：比如键盘事件里判断用户按下的具体按键（event.key）、鼠标事件里获取点击坐标（event.clientX/event.clientY）
    • 需要调用事件对象上的方法：比如阻止表单默认提交跳转（event.preventDefault()）、阻止事件冒泡（event.stopPropagation()）

新手常见踩坑 #

不要在传回调的时候手动加括号调用，比如写成userInput.addEventListener('keyup', handleKeyup())是错误的——这行代码会在绑定阶段就立刻执行handleKeyup，等真正触发keyup事件时反而没有函数可执行，也拿不到正确的event对象。正确写法是直接传函数本身：userInput.addEventListener('keyup', handleKeyup)，如果需要传自定义参数，可以在外层包一层匿名函数。

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