Soy bastante nuevo en JS y me quedé atascado en este problema. Entonces tengo este constructor que entiendo cómo funciona EXCEPTO por una cosa. ¿Cómo se llama a un controlador de eventos desde el interior de un objeto o función?
Pensé que el controlador de eventos solo podía colocarse directamente en el ámbito global, no dentro de una función/objeto u otro ámbito de bloque.
class Counter { constructor(element, defaultValue) { this.element = element; this.value = defaultValue; this.valueDOM = element.querySelector('.value'); this.valueDOM.textContent = this.value; this.increase = this.increase.bind(this); this.btnIncrease = element.querySelector('.increase'); this.btnIncrease.addEventListener('click', this.increase); } increase() { this.value++; this.valueDOM.textContent = this.value; } } const counterOne = new Counter(document.querySelector('.counter-one'), 0); const counterTwo = new Counter(document.querySelector('.counter-two'), 0);El HTML es bastante simple, solo un simple contador como este.
<div class="container counter-one"> <span class="value">0</span> <button class="increase">+</button> </div> <div class="container counter-two"> <span class="value">0</span> <button class="increase">+</button> </div>addEventListener en este caso apunta directamente al método this.increase del objeto local. No apunta a la función prototipo del objeto, sino a una copia distinta real de esa función que se adjunta a la instancia del objeto. ¿Eso ayuda?