I consoled out the this keyword (pls refer the code) but for div the console out was different and for Input tag it's different. Wondering why?

(function(){
    document.addEventListener('DOMContentLoaded', function(){
    const complement = new Complement();
    complement.generateRandomNumber();
    complement.events();
});

class Complement{
    constructor(){
        this.firstInt = document.getElementById('firstint') //this is div
        this.secondInt = document.getElementById('secondint') //this is input
        this.sumInt = document.getElementById('sumint')
    }

    events = function(){
        this.secondInt.addEventListener('keyup', this.checkFields)


    }
}
Complement.prototype.generateRandomNumber = function(){
    **console.log(this) //this refers to the Class Complement. why?**
    let randonFirstInt = Math.floor(Math.random()*100)
    
    //assign random number to first integer
    this.firstInt.textContent = randonFirstInt;
}

Complement.prototype.checkFields = function() {
    **console.log(this) //this refers to the input tag. why?** 
    let secondIntInput = this.value
    console.log(secondIntInput)
}

})()