我不明白为什么removeEventListner()在我的代码中不起作用. 下面是我的代码和简化的名称等:

const form = document.querySelector(".formclass")

function executeUserInput(userInput){
  function sayHello(event){
    event.preventDefault()
    console.log("Hello")
  }

  if(userInput === "add"){
    form.addEventListener("submit", sayHello)
  }else{
    form.removeEventListener("submit", sayHello)
  }
}

当我执行这段代码,并多次触发condition1和else—part时,每次触发condition1时都会添加一个eventlistener,但removeEventListener并没有删除它.当我在google Dev工具中判断时,我还可以看到submit listener在else—part执行后存在. 为什么? 我确实在stackoverflow上发现了一些关于这个问题的问题,但没有一个对我有帮助.

更新了代码,以更准确地表示我的代码,希望这澄清.

推荐答案

.removeEventListener()方法在传递给它的函数对象和所有其他注册的事件处理程序函数对象之间进行直接比较.如果你传递的函数不是一个注册的处理程序,那么它不会做任何事情.

在这个例子中,你有一个函数在外部函数中声明.这意味着每次调用外部函数时,都会创建内部事件处理程序的new版本.如果对外部函数的一个调用添加了一个处理程序,而下一个调用should删除了该处理程序,它将不会有对在前一个调用中创建的处理程序函数的引用.

try 将处理程序函数移到外部函数(executeUserInput())之外.

这将导致的另一个问题是,如果您连续调用外部函数3次,并且条件总是true,则表单上将得到3个独立的事件处理程序.

Javascript相关问答推荐

使用JavaScript在ionic Web应用程序中更新.pane和.view的背景 colored颜色

使用axios.获取实时服务器时的404响应

如何解决CORS政策的问题

无法在nextjs应用程序中通过id从mongoDB删除'

React Code不在装载上渲染数据,但在渲染上工作

当运行d3示例代码时,没有显示任何内容

无法访问Vue 3深度监视器中对象数组的特定对象值'

如何在输入元素中附加一个属性为checkbox?

如何避免页面第一次加载时由于CSS样式通过JavaScript更改而出现闪烁

使用领域Web SDK的Vite+Vue应用程序中的Web程序集(WASM)错误

如何使用TypeScrip设置唯一属性?

第一项杀死下一项,直到数组长度在javascript中等于1

如何用javascript更改元素的宽度和高度?

如何使用画布在另一个内部绘制一个较小但相同的形状,同时保持恒定的边界厚度?

无法检索与Puppeteer的蒸汽游戏的Bundle 包价格

判断函数参数的类型

postman 预请求中的hmac/sha256内标识-从js示例转换

bootstrap S JS赢得了REACT中的函数/加载

KeyboardEvent:检测到键具有打印的表示形式

使用jQuery每隔几秒钟突出显示列表中的不同单词