Javascript 移除带有参数的函数内的事件处理程序

我在同一个页面上有一些HTML表单，在上一个表单提交后，它们会依次切换。用户可以在它们之间来回导航，因此我需要在触发提交事件侦听器后删除它们，以便在需要时重新附加它们

目前，我正在将提交事件处理程序附加到每个事件的呈现过程中，在执行以下函数后删除事件处理程序：

表单.addEventListener“提交”，提交步骤一 函数提交步骤{ e、 防止违约 发送数据 form.removeEventListener'submit'，submitStepOne } 多个表单元素的相同代码SubmitStep2，submitStepThree

因为我不想重复相同的代码，所以我想创建一个全局提交步骤，然后转到下一个函数，我认为它可能看起来像这样：

const submitStep=事件、步骤号、触发器=>{ event.preventDefault 切换步骤编号 trigger.removeEventListener'submit'，submitStep } 我想我可以像这样使用.bind-tip将事件处理程序附加到submit按钮：

PAGES.step3.functions=函数{ 控制台。记录“步骤3” 让触发器=this.domeElement.querySelector'form' trigger.addEventListener'submit'，submitStep.bindnull，事件，4，触发器 } PAGES是一个对象，包含每个步骤的DOM元素以及每个页面的相应函数。每次使用toggleStepstep切换步骤时，都会调用PAGES.stepX.functions

然而，我得到了一个未捕获的TypeError：无法读取未定义的属性'preventDefault'。如何重写函数，以便正确地向其传递参数

谢谢你的提示

在附加submitStep函数时传递事件参数，此时未定义该函数

您需要重新排列submitStep的参数，使event成为最后一个参数，然后使用.bind部分应用stepNo和trigger

但是你的代码中还有一个bug。您正试图删除其中submitStep的事件侦听器，调用.bind后，它将不起作用，因为.bind返回一个新函数。我将把事件注册分离到一个单独的函数中，该函数将围绕事件处理程序生成一个包装器，并将包装器注册为处理程序。然后在执行过程中，它将调用实际的处理程序并注销自身

const addEventListenerOnce=触发器、事件名称、处理程序=>{ //创建将注册为事件处理程序的函数 const handlerWrapper=事件=>{ //调用实际的处理程序 汉德尔事件； //移除已注册的包装器 trigger.removeEventListenereventName，handlerWrapper； }; //将包装函数注册为事件侦听器 trigger.addEventListenereventName，handlerWrapper； }; const submitStep=stepNo，event=>{ 违约事件； 切换StepNo； } PAGES.step3.functions=函数{ 控制台。记录“步骤3” 让触发器=this.domeElement.querySelector'form' //仅应用stepNo，剩下事件 //函数签名将是event=>void const submitHandler=submitStep.bindnull，4； //注册一次要调用的提交处理程序 添加了ListenerOncTrigger，'提交'，提交者； }

---

太棒了，非常感谢你！也解释得很好。