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!!
