Hinzufügen von "this" zum Ereignis-Listener?

Question

Ich erstellte eine Quizanwendung und entschied, von .onclick() zu .addEventListener() zu wechseln. Um das zum Laufen zu bringen, musste ich Eventhandler hinzufügen.

Die einzige Art, wie ich die Zuhörer an die Arbeit indem Sie den folgenden Code zu dem Objektkonstruktor Quiz war ..

document.getElementById('guess0').addEventListener('click', this); 
document.getElementById('guess1').addEventListener('click', this); 

Dies funktioniert, aber ich bin nicht sicher, warum. Was genau macht das "this" als Funktion?

Entire Seite von Code als Referenz:

function Quiz(questions) { 
    this.questions = questions; 
    this.score = 0; 
    this.currentQuestionIndex = -1; 

    document.getElementById('guess0').addEventListener('click', this); 
    document.getElementById('guess1').addEventListener('click', this); 

    this.displayNext(); 
} 

Quiz.prototype.displayNext = function(){ 
    this.currentQuestionIndex++; 

    if(this.hasEnded()){ 
    this.displayScore(); 
    this.displayProgress(); 
    }else{ 
    this.displayCurrentQuestion(); 
    this.displayCurrentChoices(); 
    this.displayProgress(); 
    } 
}; 

Quiz.prototype.hasEnded = function() { 
return this.currentQuestionIndex >= this.questions.length; 
}; 

Quiz.prototype.displayScore = function() { 
    let gameOverHtml = "<h1>Game is over!</h1>"; 
    gameOverHtml += "<h2>Your score was: " + this.score + "!</h2>"; 

    let quizDiv = document.getElementById('quizDiv'); 
    quizDiv.innerHTML = gameOverHtml; 
}; 

Quiz.prototype.getCurrentQuestion = function() { 
    return this.questions[this.currentQuestionIndex]; 
}; 

Quiz.prototype.displayCurrentQuestion = function() { 
    let currentQuestion = document.getElementById('question'); 
    currentQuestion.textContent = this.questions[this.currentQuestionIndex].text; 
}; 

Quiz.prototype.displayCurrentChoices = function() { 
    let choices = this.getCurrentQuestion().choices; 

    for (let i = 0; i < choices.length; i++) { 
    let choiceHTML = document.getElementById('choice' + i); 
    choiceHTML.innerHTML = choices[i]; 
    } 
}; 

Quiz.prototype.handleEvent = function(event){ 
    if(event.type === 'click'){ 
    this.handleClick(event); 
    } 
}; 

Quiz.prototype.handleClick = function(event){ 
    event.preventDefault(); 
    let choices = this.getCurrentQuestion().choices; 

    if(event.target.id === "guess0"){ 
    this.guess(choices[0]); 
    } else if(event.target.id === "guess1"){ 
    this.guess(choices[1]); 
    } 
    this.displayNext(); 
}; 

Quiz.prototype.displayProgress = function() { 
    let footer = document.getElementById('quizFooter'); 
    if (this.hasEnded()) { 
    footer.innerHTML = "You have completed the quiz!"; 
    } else { 
    footer.innerHTML = "Question " + (this.currentQuestionIndex + 1) + " of " + this.questions.length; 
    } 
}; 

Quiz.prototype.guess = function(choice) { 
    if (this.getCurrentQuestion().checkAnswer(choice)) { 
    this.score++; 
    } 
}; 

Answer 1

Sie machen Quiz eine „Klasse“ (wie wir normalerweise über Klassen denken, auch wenn JS sie wirklich nicht haben). Wenn Sie quiz = new Quiz(questions) innerhalb des Quiz-Konstruktors ausführen, bezieht sich this auf das neu erstellte Objekt Quiz. addEventListener kann für den Hörer Parameter einer von zwei verschiedenen Werten annehmen:

Dies muss ein Objekt sein, den EventListener Schnittstelle implementiert, oder eine JavaScript-Funktion.

Ihre Quiz implementiert die erforderliche Schnittstelle durch Implementierung handleEvent Funktion. Wenn Sie also Ihr neu erstelltes Quiz (this) an addEventListener übergeben, wird beim Auftreten des Ereignisses quiz.handleEvent aufgerufen.