Question

对于事件监听器的真实布尔值，我读了here：

once：布尔值，指示侦听器在添加后最多应调用一次。如果为true，则在调用侦听器时会自动将其删除。

window.addEventListener("keydown", function(event){
    switch(event.code){
        case 'Digit1': 
            shoot('Ball1');
            break;

        case 'Digit2':
            shoot('Ball2');
            break;
    }
}, true);

在我的代码中，功能拍摄被称为无尽。为什么？

该如何解决？函数Shoot（）只能启动一次。

根据建议，我将“ true”更改为“ {once：true}”。它仍然称射击（）无休止。你有一个主意，为什么？

感谢@CertainPerformance。

如果应该遇到相同的问题，请注意，Internet Explorer不知道event.code。

Answer 1

提供给addEventListener的第三个参数是一个options object 或一个布尔值useCapture。因为您传递了一个布尔值，所以解释程序正在考虑您已表明您希望函数在捕获阶段而不是冒泡阶段中触发，这不是您所关心的。

改为使用options属性传递once对象：

window.addEventListener(
  "keydown",
  function(event){
    switch(event.code){
      case 'Digit1': 
        shoot('Ball1');
        break;

      case 'Digit2':
        shoot('Ball2');
        break;
    }

  },
  { once: true }
);

window.addEventListener(
  "keydown",
  function(event){
    console.log('function running');
  },
  { once: true }
);

Internet Explorer和其他较旧的浏览器版本don't support和once选项，因此，要支持IE，您必须编写更多代码-触发后手动删除侦听器：

function listener() {
  console.log('function running');
  window.removeEventListener("keydown", listener);
}
window.addEventListener("keydown", listener);

或者，也使用switch：

window.addEventListener("keydown", listener);

function listener(event) {
  console.log('function running');
  window.removeEventListener("keydown", listener);

  switch (event.code) {
    case 'Digit1':
      shoot('Ball1');
      break;

    case 'Digit2':
      shoot('Ball2');
      break;
  }
}

同样，有更多switch个案例：

window.addEventListener("keydown", listener); 

function listener(event) { 
  console.log('function running'); 
  window.removeEventListener("keydown", listener); 

  switch(event.code){ 
    case 'Digit1': 
      shoot('Ball1'); 
      break; 

    case 'Digit2': 
      shoot('Ball2'); 
      break; 

    case 'Digit3': 
      shoot('Ball3'); 
      break; 

    case 'Digit4': 
      shoot('Ball4'); 
      break; 
  }
}

Answer 2

您要添加的boolean参数未指定事件处理程序仅应执行一次。它与事件捕获有关。

要让处理程序仅执行一次，您需要传递一个options对象：

window.addEventListener("keydown", function(event) { /* ... */ }, {once: true});

为什么事件会多次触发？

2 个答案: