Tengo el siguiente código:
HTML
<button>Add Name</button> <ul id="names"></ul>JS
class NameField { constructor(name) { const field = document.createElement('li'); field.textContent = name; const nameListHook = document.querySelector('#names'); nameListHook.appendChild(field); } } class NameGenerator { constructor() { const btn = document.querySelector('button'); btn.addEventListener('click', this.addName); } addName() { const name = new NameField("Max"); } } const gen = new NameGenerator(); así que aquí cuando hago clic en el botón, cada vez que se ejecuta la función addName y max se imprime en el HTML.
Pero cuando cambio la línea a:
btn.addEventListener('click', this.addName()); luego, inicialmente imprimí Max en el navegador HTML que se esperaba porque llamé a la función de inmediato, no omití el () .
Pero no entiendo por qué después de la impresión inicial, cuando hago clic en el botón, no vuelvo a imprimir Max . porqué es eso ?
De acuerdo, obtuve la impresión inicial en HTML, pero ¿no debería volver a imprimir ahora Max cuando hago clic en el botón? ¿Y por qué no estoy recibiendo?
Esto se debe a que debe entregar una referencia a una función.
Si tú escribes
btn.addEventListener('click', this.addName()); javascript llama a this.addName() instantáneamente y ejecuta el valor de retorno de this.addName() cuando hace clic en el botón.
Pero this.addName() no tiene un valor de retorno explícito, por lo que devuelve el valor de retorno estándar de Javascript, que no está undefined .
Así que esencialmente lo que hace tu código es
btn.addEventListener('click', undefined); excepto que este undefined se devuelve desde su llamada a this.addName() (que ejecuta la función una vez, por lo tanto, ve la salida de la consola).