Entendiendo el DOM
¿Para qué aprender JavaScript?
¿Qué es DOM y Window Object?
Explorando Nodos del DOM
Seleccionando y Accesando a Elementos del DOM
Consultando el DOM con getElementById y querySelector
Navegación efectiva entre nodos
Manipulando Elementos del DOM
Modificando atributos y propiedades
Modificando texto en HTML
Modificando estilos en HTML
Modificando la visibilidad de elementos HTML
Creación de elementos con HTML Strings e insertAdjacentElement()
Agregando elementos con innerHTML e insertAdjacentHTML()
Creación de elementos con createElement()
Remover elementos con remove() y removeChild()
Clonación y reemplazo de elementos con cloneNode y replaceChild
Manipulando Eventos en el DOM
Entendiendo eventos y tipos: Burbuja, Captura y Propagación
Agregar y eliminar escuchadores de eventos o Event Listeners
El objeto evento o eventObject
Manejo de entradas de formulario y validación
Delegación de eventos y prevención de comportamiento predeterminado
Creando un Administrador de Tareas
Añadir tareas desde un formulario
Eliminar y editar tareas del DOM
Almacenamiento y carga de datos en localStorage
Eliminar y editar tareas del almacenamiento local
Inspeccionando y solucionando errores en el código
Personalizando la interfaz del administrador de tareas
Aún hay más por aprender
Asincronía en JavaScript
¿Cómo funciona el JavaScript Engine?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Delegación de eventos y prevención de comportamiento predeterminado
19/27Recursos
Aportes 10
Preguntas 0
Ordenar por:
Aqui les dejo mi aporte:
```js
const listParent = document.querySelector('ul')
//se invoca al elemento declarado anteriormente
listParent.addEventListener('click',(e)=>{
//esta variable "listItem" ayuda a guardar el método closest()
const listItem = e.target.closest('li')
//luego validamos si el evento se dispara, entoces que agrege la clase "highlight"
if (listItem) {
listItem.classList.toggle('highlight')
}
})
```
Por ejmplo, algo que vi en un comentario de esta clase y me parece importante es que validemos que se seleccione el elmento correcto, por que si no lo hacemos saldra un error en consola como le paso al profe en el minuto 8:19, les dejo como podrian solucionarlo, igualmente no afecta en nada que salga eso en la consola o eso creo yo, pero a mi me molesta.
Dejo por aquí el código del profesor para poder echarle un vistazo con más calma:
```js
//añadiendo el mismo listener a cada elemento
const listItems = document.querySelectorAll("li")
listItems.forEach( (item) => {
item.addEventListener('click', (event) => {
event.target.classList.toggle('highlight')
})
})
//añadiendo un solo listener al padre
const list = document.querySelector('ul')
list.addEventListener('click', (event) => {
event.target.closest('li').classList.toggle('highlight')
})
```
* **Problema de rendimiento:** Crear un nuevo manejador de eventos para cada elemento puede afectar el rendimiento cuando hay muchos elementos en el DOM
* **Delegación de eventos:** Consiste en agregar un único escuchador de eventos a un elemento padre común. Esto mejora el rendimiento y es más fácil de mantener.
¿Alguien más nota un delay al dispapar el evento? Además cuando hago click sobre el texto no se dispara con la segunda forma
Igualmente no estaría de más, por si acaso, verificar si exactamente lo que estamos haciendo clic es uno de los elementos li que nos interesa (y que no sea otro li diferente quizás fuera de la lista ul), ya que al dejarlo simplemente con un "closest" de esa forma si se hace clic en los espacios vacíos entre los li (o sea, haciendo clic dentro de la lista ul pero sin seleccionar ninguno de los li) dependiendo de cómo tengamos estructurado nuestro HTML es posible que otro li (que no sea ninguna de las opciones dentro del ul) sea el que se termine iluminando.
Aunque en este caso específico de la clase todo funciona perfectamente ya que los únicos li son los que están dentro del ul. Pero en caso de que se vaya a usar en algún proyecto, estaría bien escribir dentro del closest() los li con una clase que nos asegure que solo son ellos y no otros li que estén por nuestro HTML.
**Concepto de delegación de eventos**
La delegación de eventos es un patrón de programación que permite manejar eventos en JavaScript de manera más eficiente y escalable. Funciona aprovechando la propagación de eventos (event bubbling) en el DOM
**Cómo funciona la delegación de eventos**
La delegación de eventos se basa en la idea de delegar el manejo de un evento a un elemento superior en la estructura DOM, en lugar de al elemento que recibió el evento originalmente [**1**](https://www.freecodecamp.org/news/event-delegation-javascript/).
**Beneficios de la delegación de eventos**
1. Eficiencia en memoria: Reduce el número de oyentes de eventos, lo que puede ahorrar memoria y mejorar el rendimiento, especialmente con muchos elementos.
2. Manejo de elementos dinámicos: Permite manejar eventos en elementos añadidos dinámicamente al DOM después del cargado inicial de la página.
3. Simplicidad: Simplifica la gestión de oyentes de eventos, especialmente cuando muchos elementos comportan de manera similar.
El HTML de la clase:
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding: 1rem;
border: 1px solid black;
margin: 1rem;
cursor: pointer;
}
li:hover {
background-color: #ccc;
}
.highlight {
background-color: #81fa07;
color: white;
}
</style>
</head>
<body>
<main>
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
- \
- Option 1\ \
- Option 2\ \
- Option 3\ \
- Option 4\ \
- Option 5\ \
Aca mi codigo, con la version que hice y las otras del video:
```js
const allList = document.querySelectorAll('li')
const father = document.querySelector('ul')
//Mi version:
allList.forEach((list) => {
list.addEventListener('click', () => {
list.classList.toggle('active')
})
});
//teacher way
allList.forEach((list) => {
list.addEventListener('click', (event) => {
event.target.classList.toggle('active')
})
})
//Version final
father.addEventListener('click', (event) => {
const mainlist = event.target.closest('li')
if (mainlist) {
mainlist.classList.toggle('active')
}
})
```
Tal parece que esto es muy util en no solo listas, sino menus , formularios, galerias de imagenes, que necesitan dinamismo, parecese ser , que los elementos añadidos Dinammicamente tendran un manejo del foco mejor si se usa la delegacion de eventos, y sera maas facil mantener la consistencia del contenido, 2 aspectos cruciales en la accesibilidad del contenido (los patrones de interaccion predecibles son fundamentales para una interfaz amigable)
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?