In event listeners, this refers to the DOM element that triggered the event by default. To preserve the correct this when using class methods as handlers, you can use bind, an arrow function wrapper, or an arrow function class field.
In a DOM event listener, this is bound to the element that fired the event (e.g., button). When you use a class method as a handler, this will point to the element, not the class instance. To preserve the correct this, you have several options: (1) bind the method in the constructor: this.handleClick = this.handleClick.bind(this);, (2) use an arrow function wrapper: element.addEventListener('click', () => this.handleClick());, or (3) define the method as an arrow function class field: handleClick = () => { ... }. Example: class Button { constructor() { this.name = 'MyButton'; this.handleClick = this.handleClick.bind(this); } handleClick() { console.log(this.name); } }.