来自 Eloquent JavaScript 的 removeEventListener 示例

Question

在下面的屏幕截图中，有人可以解释一下为什么必须将函数“once”传递给 button.removeEventListener(“click”, once) 吗？我们是否仅仅因为 removeEventListener 方法需要两个参数而传递它？此外，考虑到“once”函数也被传递到 removeEventListener 方法中，“Done”没有被控制台多次记录，这似乎很奇怪。

let button = document.getElementById("button");

function once() {
  console.log("Done");
  button.removeEventListener("click", once);
}
button.addEventListener("click", once);

<button id="button">once</button>

Answer 1

当你只想解除绑定特定的处理程序时（比如这里你正在解除绑定once处理程序），你需要将它作为第二个参数传递，否则 JS 将不知道要删除哪个处理程序。

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

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

这就是它只被调用一次的原因。您在那里传递了函数 once 的引用，因此 JS 知道要取消绑定哪个处理程序。当您调用removeEventListener 时，它不会调用它。

一旦用户单击按钮，该函数就会被调用，在处理程序中有这个console.log，并且在它会立即取消注册，因此以后的单击将不再触发该函数。

Answer 2

您可以在 javascript 中将多个事件绑定到同一个动作的一个元素。

当您想从绑定事件中删除特定处理程序时，您需要在removeEventListener 中传递该处理程序函数名称。如果您没有在removeEventListener 中传递第二个参数，它将简单地删除该事件上该操作的所有处理程序。

在您的情况下，您正在从自身内部删除处理程序 once。

一个带有不同处理程序的例子来说明：

function firstListener(e) {
  console.log('firstListener');
}

function secondListener(e) {
  console.log('secondListener');

  // this will remove `firstListener` handler from subsequent button clicks
  e.target.removeEventListener('click', firstListener);
}

// bind first event handler function
document.querySelector('#btnMultiEvent').addEventListener('click', firstListener);

// bind second event handler function
document.querySelector('#btnMultiEvent').addEventListener('click', secondListener);

<button id="btnMultiEvent">Multiple Event Button</button>

更多关于removeEventListener

Answer 3

让我在一个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 相同，并从“点击”事件中自行移除。