Estoy mirando el siguiente enlace que es parte de la documentación de delegación de eventos.
En el enlace, tenemos lo siguiente.
let table = document.getElementById('bagua-table'); let selectedTd; table.onclick = function(event) { let target = event.target; while (target != this) { if (target.tagName == 'TD') { highlight(target); return; } target = target.parentNode; } } Simplemente no puedo entender por qué el siguiente while (target != this) . Entiendo que this palabra clave aquí se refiere a toda la tabla, ya que ese es el objeto en juego, pero ¿por qué escribir un ciclo de esta manera?
Tal vez mi comprensión de esto no es tan profunda. Si alguien pudiera por favor aclarar.
Gracias
Lo que esto hace es que el target comienza en el destino del evento, el elemento más interno al que se envió el evento. Luego busca el objetivo, luego su ancestro, luego su ancestro, y así sucesivamente. El primero que coincida con la condición target.tagname == 'TD' , si lo hay, dará como resultado que se llame al highlight y que finalice el ciclo. Si ningún elemento coincide, el ciclo continuará hasta que el objetivo sea this , la tabla, y terminará en ese punto.
Pero este es un código bastante confuso. Usar .closest sería mucho más fácil, ya que encontrará el primer ancestro que coincida con un selector.
table.onclick = (event) => { const td = event.target.closest('td'); if (td) highlight(td); };Si las tablas anidadas son una posibilidad, y no desea que el evento vaya más allá de la tabla en cuestión, incluya la tabla en la cadena de selección:
table.onclick = (event) => { const td = event.target.closest('#bagua-table td'); if (td) highlight(td); };En un detector de eventos, this es equivalente a event.currentTarget , que es el elemento al que se agregó el detector (la table ).
event.target es el elemento anidado en el que realmente se hizo clic.
Entonces, el ciclo sube por la jerarquía DOM (usando target.parentNode ) desde el elemento en el que se hizo clic hasta que llega a la tabla a la que se agregó el oyente.
Si llega a un elemento TD en el camino, resalta ese elemento y regresa, lo que sale del bucle.
Es más o menos equivalente a:
highlight(event.target.closest("TD"));