為什么不能將事件偵聽器添加到div？

Question

我有一個對象，該對象具有創建div的方法，然后為它們分配一個on-click事件，但是我也想為它們分配一個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

默認情況下， div是“可選”的，因此它不會對任何按鍵事件做出反應。 但是，您可以通過將div添加tabindex="0"使其變為可選。 這樣，當您單擊它時它將變得可聚焦，然后允許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 。