Qfyilyi

For the true boolean on eventListeners I read here:

once: A Boolean indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked.

window.addEventListener("keydown", function(event){

    switch(event.code){

        case 'Digit1': 

            shoot('Ball1');

            break;



        case 'Digit2':

            shoot('Ball2');

            break;

    }

}, true);

In my code the function shoot is called endless. Why?

And how can I fix it? The function shoot() may start only once.

As recommended I changed 'true' into '{once: true}'. It still call shoot() endless. Do you have an idea, why?

Thanks to @CertainPerformance.

If you should have the same problem be aware, that the internet explorer doesn't know event.code.

The third parameter provided to addEventListener is either an options object, or useCapture, a boolean. Because you passed a boolean, the interpreter is considering you to have indicated that you want the function to trigger in the capturing phase, rather than the bubbling phase - which is not something you care about.

Pass an options object with a once property instead:

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 and other older browser versions don't support the once option, so to support IE, you'll have to write a bit more code - manually remove the listener once it's triggered:

function listener() {

  console.log('function running');

  window.removeEventListener("keydown", listener);

}

window.addEventListener("keydown", listener);

Or, with the switch as well:

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;

  }

}

Again, with more switch cases:

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; 

  }

}

The boolean parameter you're adding doesn't specify that the event handler should only be executing once. It relates to event capture.

To have the handler execute only once, you need to pass an options object:

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