Estoy tratando de hacer una lista desplegable que agregue dinámicamente elementos de una API. Cuando el usuario selecciona un elemento en el menú desplegable, debe agregar una clase llamada "actual" a ese elemento. Solo un elemento desplegable de la lista puede tener aplicada la clase 'actual'.

Creé con éxito los elementos HTML (listItem) y los agregué a la lista. Sin embargo, cuando trato de agregar un detector de eventos, el evento se registra con los elementos secundarios img y div con texto de modo que cuando el usuario hace clic en ellos, la clase 'actual' se aplica allí y no el nodo principal.

Leí sobre "evento burbujeante", pero no estoy seguro de si este es mi problema o no.

 document.addEventListener('DOMContentLoaded', async () => { const dropDownToggle = document.querySelector('.w-dropdown-toggle') const dropDownList = document.querySelector('.w-dropdown-list') const countries = await getCountries(); countries.forEach((country) => { const countryName = country.name.common; const cca2 = country.cca2; const svgUrl = country.flags.svg; let prefix = country.idd.root + country.idd.suffixes?.[0] prefix = Number.isNaN(prefix) ? prefix="" : prefix //console.log(countryName, cca2, prefix) const listItem = createListItem(countryName, cca2, svgUrl, prefix); // Bad code here: <a> tag gets event listener but so do its children listItem.addEventListener("click", (event) => { console.log(event); //console.log(event); //document.querySelector('current')?.classList.remove('current'); //document.querySelector('current').ariaSelected = false; console.log('hello') event.target.classList.add("current"); event.target.ariaSelected = true; console.log('goodbye') }); dropDownList.append(listItem); }) }); const getCountries = async () => { let url = 'https://restcountries.com/v3.1/all' const response = await fetch(url) const data = await response.json(); return data; } const createListItem = (countryName, cca2, svgUrl, prefix) => { const template = ` <a data-element="item" aria-role="option" aria-selected="false" href="#" class="dropdown_item w-inline-block" tabindex="0"><img src="${svgUrl}" loading="lazy" data-element="flag" alt="" class="dropdown_flag"><div data-element="value" class="dropdown_text">${cca2}</div></a> ` const listItem = document.createElement("template"); listItem.innerHTML = template.trim(); return listItem.content.firstElementChild }