Agregar interactividad a una lista de tareas es uno de los ejercicios más prácticos para comprender cómo funciona la delegación de eventos en JavaScript. En lugar de asignar un event listener a cada botón de forma individual, se aprovecha un único evento en el elemento padre para controlar qué acción ejecutar según el botón que reciba el clic. Este enfoque es más eficiente y escalable.
¿Cómo funciona la delegación de eventos con addEventListener?
La idea central es registrar un solo listener en el contenedor padre, en este caso taskList, y usar la propiedad event.target para identificar exactamente qué elemento recibió el clic [0:52]. Así se evita crear múltiples constantes o asignar eventos uno por uno a cada botón.
javascript
taskList.addEventListener('click', function(event) {
console.log(event.target);
});
Al imprimir event.target en consola, se puede observar que devuelve el botón específico al que se le dio clic [1:42]. Si se presiona el botón de borrar, el target muestra ese botón; si se presiona el de editar, cambia automáticamente. Esto confirma que el padre detecta cuál de sus hijos recibió la interacción.
¿Qué hace classList.contains en la validación?
Para distinguir entre los botones de borrar y editar, se utiliza event.target.classList.contains() [2:22]. Este método revisa si el elemento clickeado posee una clase CSS determinada. Si la contiene, se ejecuta la función correspondiente.
javascript
if (event.target.classList.contains('borrar')) {
deleteTask(event.target.parentElement);
} else if (event.target.classList.contains('editar')) {
editTask(event.target.parentElement);
}
- classList permite acceder a la lista de clases CSS de un elemento.
- contains devuelve
true o false según si la clase existe.
- parentElement sube un nivel en el DOM para seleccionar el
<li> completo de la tarea, no solo el botón [3:35].
¿Cómo se implementa la función para borrar una tarea?
La función deleteTask recibe como parámetro el elemento de la tarea (taskItem) y, antes de eliminarlo, lanza un confirm [3:08]. A diferencia de alert, confirm muestra dos botones: aceptar y cancelar. Solo si la persona confirma, se ejecuta taskItem.remove() para eliminar el nodo del DOM.
javascript
function deleteTask(taskItem) {
if (confirm('¿Estás segura/seguro de borrar este elemento?')) {
taskItem.remove();
}
}
- confirm retorna un booleano:
true si se acepta, false si se cancela.
- remove() elimina el elemento directamente del documento sin necesidad de referirse al padre.
¿Cómo se edita el texto de una tarea con prompt?
La función editTask utiliza un prompt, que es una ventana emergente que permite al usuario escribir texto [4:18]. Se precarga con el contenido actual de la tarea usando taskItem.firstChild.textContent, de modo que la persona solo modifique lo necesario.
javascript
function editTask(taskItem) {
const newTask = prompt('Edita la tarea:', taskItem.firstChild.textContent);
if (newTask !== null) {
taskItem.firstChild.textContent = newTask;
}
}
- prompt regresa el texto ingresado o
null si se cancela.
- firstChild accede al primer nodo hijo del elemento, que contiene el texto de la tarea [4:40].
- textContent permite tanto leer como reescribir el contenido de texto de un nodo.
- La validación
newTask !== null evita que al cancelar el prompt se sobrescriba la tarea con un valor nulo [5:15].
¿Por qué usar parentElement al pasar el elemento a las funciones?
Cuando el usuario da clic, event.target apunta al botón, no al contenedor de la tarea. Para operar sobre toda la tarea —borrarla o acceder a su texto— se necesita subir un nivel con parentElement [5:40]. De esa forma, las funciones reciben el <li> completo y pueden manipularlo correctamente.
Esta estructura de delegación de eventos, combinada con confirm y prompt, ofrece una solución limpia para manejar acciones CRUD básicas sin dependencias externas. Si has implementado algo similar o tienes una forma diferente de resolverlo, comparte tu enfoque en los comentarios.
