Estoy tratando de aplicar la delegación de eventos, por lo que quiero actualizar el texto cuando hago clic dentro del elemento li, pero cuando hago clic dentro de un elemento, no se activará. No quiero adjuntar el detector de eventos directamente a li, ya que la lista se puede actualizar y puede haber cualquier tipo de elemento dentro de li.
const menu = document.querySelector('.menu'); const textField = document.querySelector('p'); menu.addEventListener('click', e => { if (e.target.matches('li')) { textField.textContent = e.target.textContent; } }); li { padding: 1em; border: 1px solid red; } a { border: 1px solid blue; } <div class="menu"> <ul> <li><a>Home</a></li> <li><a>Gallery</a></li> <li><a>About us</a></li> </ul> <p></p> </div>Si desea el li y no el ancla o cualquier otro elemento secundario, use el más cercano
const li = e.target.closest("li"); if (li) { /* do whatever */ }Puede utilizar el efecto burbujeante adjuntando un detector de eventos de click a la lista principal, ul .
const menu = document.querySelector('.menu'); const ul = menu.querySelector('ul'); const textField = document.querySelector('p'); ul.addEventListener('click', e => { if(e.target != ul) textField.textContent = e.target.textContent; }); li { padding: 1em; border: 1px solid red; } a { border: 1px solid blue; } <div class="menu"> <ul> <li><a>Home</a></li> <li><a>Gallery</a></li> <li><a>About us</a></li> </ul> <p></p> </div>