title: addEventListener is being triggered twice
body: <p>I have an event listener that listens for hotkeys that's being triggered twice. I'm pretty sure I know the reason why but not how to fix it.</p>
  <p>So I have a program that displays several questions, and for each question I use a new event listener attached to the document (To avoid focus issues). I think the next question is being displayed, and a new event listener is being created while the hot key is still pressed, causing the program to select the answer for two questions instead of one.</p>
  <p>Is there someway to yield until the key is no longer pressed (Assuming that's the issue)? Here's my code.</p>
  <pre><code>function showQuestion() {
      function checkKeySelectAnswer(keypress) {
          let key_code = keypress.keyCode
          //document.removeEventListener('keydown', checkKeySelectAnswer)
          console.log('showQuestion Checking key press, key_code is ', key_code)
          if (key_code === 37) {
              console.log('showQuestion Left arrow pressed')
              console.log('showQuestion Result is ', question_object['answers']['No'])
              selectAnswer('No', question_object['answers']['No'])
          } else if (key_code === 39) {
              console.log('showQuestion Right arrow pressed')
              console.log('showQuestion Result is ', question_object['answers']['Yes'])
              selectAnswer('Yes', question_object['answers']['Yes'])
          }
      }
      let question_object
      if (checkSubQuestion(current_index)) {
          question_object = user_dict['questions'][section][category][current_index]['sub_questions'][current_sub_index]
          console.log('showQuestion More sub questions found, question_object is ', question_object)
      } else {
          question_object = user_dict['questions'][section][category][current_index]
          console.log('showQuestion More questions found, question_object is ', question_object)
      }
      removeAnswers()
      questionElement.innerText = question_object['question']
      for (const [key, value] of Object.entries(question_object['answers'])) {
          let answer = key
          let result = value
          const button = document.createElement('button')
          button.innerText = answer
          if (!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/)) {
              if (answer === 'No') {
                  button.classList.add('no-btn')
              } else if (answer === 'Yes') {
                  button.classList.add('yes-btn')
              }
          }
          button.classList.add('btn')
          button.addEventListener('click', function () {
              selectAnswer(answer, result)
          })
          answerButtonsElement.appendChild(button)
      }
      document.addEventListener('keydown', checkKeySelectAnswer, { once: true})
  }
  </code></pre>