Tengo una NodeList de números de elementos de botón. Quiero que cada uno de los elementos escuche el evento keydown en relación con su propio contenido de texto.
Cuando uso document.addEventHandlers("keydown", function ), funciona bien.
Método 1:
document.addEventListener("keydown", (e)=>{ numbers.forEach(number=>{ if (number.textContent === e.key){ addNumber(number) }})})Sin embargo, deja de funcionar cuando uso esto en su lugar:
Método 2:
numbers.forEach(number=>number.addEventListener("keydown", (e)=>{ if (number.textContent === e.key){ addNumber(number); }}))El primer método no me parece eficiente, ya que tiene que hacer una comparación con todos los elementos en números cada vez que se activa "keydown". ¿Alguien puede decirme por qué el método 2 no funciona como el método 1?
Si el problema es el rendimiento, puede asignar sus números en un mapa/diccionario con su contenido de texto como clave y el objeto de número como valor. Después:
document.addEventListener("keydown", (e) => { var number = numbersByKey[e.Key]; if (number) addNumber(number); }) document.addEventListener("keydown", (e)=>{ numbers.forEach(number=>{ if (number.textContent === e.key){ addNumber(number) }})})En el código anterior, está agregando un oyente de pulsación de tecla para el documento en sí, por lo que cada vez que presiona una tecla en el teclado, este evento se activa.
numbers.forEach(number=>number.addEventListener("keydown", (e)=>{ if (number.textContent === e.key){ addNumber(number); }}))En este código, está agregando un oyente de pulsación de tecla al elemento individual, por lo que solo si el elemento está enfocado, el evento de pulsación de tecla se activará para ese elemento.