Почему я не могу добавить прослушиватель событий в div?

Question

У меня есть объект, у которого есть метод, который создает div, затем назначает им событие по нажатию кнопки, но я также хочу назначить им событие onkeypress, но оно не позволит мне сделать это ...

Это метод, который создает div.Он работает нормально.

populateSquares(){
    let relatedTagToPopulation = document.getElementById("questionp");
    let whatTextIs = relatedTagToPopulation.textContent;
    for (let u=0;u<this.stemQuestions.length;u++){
        if (this.stemQuestions[u]==whatTextIs){
            var populateSquaresPertinentInt = u;
        }
    }
    for  (let i=0;i<this.stemAnswers.length;i++){
        if (i==populateSquaresPertinentInt){
            let numberOfSquaresToAdd = this.stemAnswers[i].length;
            for (let j=0;j<numberOfSquaresToAdd;j++){
                let elToAdd = document.createElement("div"); 
                elToAdd.id="ans"+j+"";
                elToAdd.className="lans";
                elToAdd.onclick= hangmanGame.selectThisSquare;
                console.log(elToAdd);
                let elToAddInto = document.getElementById("answeri"); 
                elToAddInto.appendChild(elToAdd); 
            }
        }
    }
},

Это метод, который добавляет некоторые свойства в div, а также прослушиватель событий

selectThisSquare(e){
    let currentElementId = e.target.id;
    document.getElementById(currentElementId).style.cursor = "text";
    document.getElementById(currentElementId).style.backgroundColor = "#557a95";
    document.getElementById(currentElementId).onkeydown = hangmanGame.textInputHandler;
    console.log(e.target.id);
    let x = hangmanGame.giveCurrentQuestionAndWord();
    let xs = x[1];
    hangmanGame.deselectAllOtherSquares(currentElementId,xs);
},

Это метод, который должен срабатывать, когда ключнажата, но ничего не срабатывает.

textInputHandler(){
    console.log(4);
},

Answer 1

A div по умолчанию не «выбирается» и, следовательно, не реагирует ни на какие нажатия клавиш.Тем не менее, вы можете сделать его выбираемым, добавив tabindex="0" в div.Таким образом, он становится фокусируемым при нажатии на него, что позволяет запускать событие onkeydown.

См. Рабочий пример ниже:

const game = {
  addKeyDownListener() {
    document.getElementById("txt").onkeydown = game.handleTextInput
  },
  handleTextInput() {
    console.log(4);
  }
}

game.addKeyDownListener();

#txt {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  outline: none; /* add to hide outline */
}

<div type="text" id="txt" tabindex="0"></div>

Примечание: По умолчанию добавление tabindex даст вашему div синий контур после выбора.Чтобы удалить это, добавьте css outline: none.