从雄辩的JavaScript中删除VeveEventListener示例

在下面的屏幕截图中，是否有人能解释一下为什么必须将函数“一次”传递给button.removeEventListener（“单击”，一次）？我们传递它仅仅是因为removeEventListener方法需要两个参数吗？此外，如果“once”函数也被传递到removeEventListener方法中，那么“Done”并没有被多次记录到控制台中，这似乎很奇怪

let button=document.getElementById（“按钮”）；
函数once（）{
控制台日志（“完成”）；
按钮。removeEventListener（“单击”，一次）；
}
按钮。addEventListener（“单击”，一次）
once
当您只想解除绑定特定的处理程序时（就像这里您正在解除绑定
once
handler），您需要将其作为第二个参数传递，否则JS将不知道要删除哪个处理程序

每个事件可以绑定多个处理程序

此外，如果“once”函数也被传递到removeEventListener方法中，那么“Done”并没有被多次记录到控制台中，这似乎很奇怪

这就是为什么它只被调用一次的原因。在那里传递函数
的引用一次
，以便JS知道要解除绑定哪个处理程序。当您调用
removeEventListener
时，它不会调用它

一旦用户单击该按钮，就会调用该函数，在处理程序中有一个
控制台.log
，然后它将立即注销自身，这样以后的单击将不再触发该函数
 当您只想解除绑定特定的处理程序时（就像这里您正在解除绑定一次
处理程序），您需要将其作为第二个参数传递，否则JS将不知道要删除哪个处理程序

每个事件可以绑定多个处理程序

此外，如果“once”函数也被传递到removeEventListener方法中，那么“Done”并没有被多次记录到控制台中，这似乎很奇怪

这就是为什么它只被调用一次的原因。在那里传递函数
的引用一次
，以便JS知道要解除绑定哪个处理程序。当您调用
removeEventListener
时，它不会调用它

一旦用户单击该按钮，就会调用该函数，在处理程序中有一个
控制台.log
，然后它将立即注销自身，这样以后的单击将不再触发该函数
 您可以将javascript中的多个事件绑定到同一操作中的一个元素

如果要从绑定事件中删除特定处理程序，需要在
removeEventListener
中传递该处理程序函数名。如果不在
removeEventListener
中传递第二个参数，它将删除该事件上该操作的所有处理程序

在本例中，您将从处理程序本身中删除一次处理程序

使用不同处理程序的示例来说明：


函数firstListener（e）{
log（'firstListener'）；
}
函数secondListener（e）{
log（'secondListener'）；
//这将从后续的按钮单击中删除“firstListener”处理程序
e、 target.removeEventListener（'click'，firstListener）；
}
//绑定第一个事件处理程序函数
document.querySelector（“#btnMultiEvent”）.addEventListener（'click'，firstListener）；
//绑定第二个事件处理程序函数
document.querySelector（“#btnMultiEvent”）.addEventListener（'click'，secondListener）
多事件按钮
您可以将javascript中的多个事件绑定到同一动作的一个元素

如果要从绑定事件中删除特定处理程序，需要在
removeEventListener
中传递该处理程序函数名。如果不在
removeEventListener
中传递第二个参数，它将删除该事件上该操作的所有处理程序

在本例中，您将从处理程序本身中删除一次处理程序

使用不同处理程序的示例来说明：


函数firstListener（e）{
log（'firstListener'）；
}
函数secondListener（e）{
log（'secondListener'）；
//这将从后续的按钮单击中删除“firstListener”处理程序
e、 target.removeEventListener（'click'，firstListener）；
}
//绑定第一个事件处理程序函数
document.querySelector（“#btnMultiEvent”）.addEventListener（'click'，firstListener）；
//绑定第二个事件处理程序函数
document.querySelector（“#btnMultiEvent”）.addEventListener（'click'，secondListener）
多事件按钮
让我在ascii代码表中解释一下：

               | script start | nothing happens | once() execute | nothing happens |
---------------|--------------|-----------------|----------------|-----------------|
"click" Events | once() added | once() waiting  | once() removed |                 |
               | lala() added | lala() waiting  | lala() waiting | lala() waiting  |

函数lala与once相同，并将其自身从“单击”事件中删除。
让我在ascii代码表中解释一下：

               | script start | nothing happens | once() execute | nothing happens |
---------------|--------------|-----------------|----------------|-----------------|
"click" Events | once() added | once() waiting  | once() removed |                 |
               | lala() added | lala() waiting  | lala() waiting | lala() waiting  |

函数lala与once相同，并将其自身从“单击”事件中删除。
感谢Martin的解释-这很有帮助。感谢Martin的解释-这很有帮助。“我们传递它仅仅是因为removeEventListener方法需要两个参数吗？”-不。这不像我们传递一些随机值只是因为函数有两个参数。我们传递事件侦听器函数正是因为
removeEventListener
需要知道要删除哪个侦听器，正如您所能做到的那样。“我们传递它仅仅是因为removeEventListener方法需要两个参数吗？”-不。我们传递一些随机值并不是因为函数有两个参数。我们传递事件侦听器函数正是因为
removeEventListener
需要尽可能地知道要删除哪个侦听器。