En esta entrada de eventos con Jquery ve铆amos como hacer esto con Jquery, pero ahora lo vamos a ver con javascript.
El fondo te贸rico es el mismo, lanzar el evento click a un padre que no sea din谩mico y luego ver cual de sus hijos lo ha lanzado.
En el html tenemos un .container, y dentro un bot贸n .btn.
En el c贸digo de Javascript cogemos el .container y el .btn (en jquery hac铆amos un .btn:last-child, pero el m茅todo querySelector solo coge el primero objeto html que coincida con los par谩metros de b煤squeda) y ponemos a escuchar el evento click al padre .container.
Una vez que el elemento es lanzado recogemos en el par谩metro e al elemento que ha lanzado el evento que en este caso es el boton que hemos pulsado. Luego comprobamos que sean los botones con la clase que queremos con e.target.className (en el caso que sea un id ser铆a e.target.id) y si coincide, ya ejecutamos lo que queramos, en este caso, clonamos el boton y lo agregamos despu茅s de .btn.
He dejado cosas en el tintero que m谩s adelante comentaremos, pero si es interesante que sepas las diferencias entre .querySelector() .getElementById() y getElementsByClassName().
.querySelector(): me permite seleccionar un elemento HTML al estilo de jquery, PERO SOLO ME SELECCIONA LA PRIMERA COINCIDENCIA, si tenemos varios botones .btn como en el ejemplo anterior, solo me selecciona el primero.
.getElementById(): me permite seleccionar el elemento HTML que tenga el id que le paso como par谩metro.
.getElementsByClassName(): me permite seleccionar todos los elementos HTML cuya clase sea igual al par谩metro que le hemos pasado al m茅todo.
Chao!!
Entradas Relacionadas
- Introducci贸n a la programaci贸n con pseudoc贸digo
- Obtener valores de un input con Javascript
- Tipos de Microprocesadores: Caracter铆sticas y Aplicaciones
- Machine Learning con JavaScript. (Regresi贸n Lineal)
- Haciendo un CRUD sencillo en Javascript
- Clasificaci贸n de los Lenguajes de Programaci贸n: Niveles, Paradigmas y Ejemplos
