Manipulando eventos en Javascript

Eventos

Los eventos nos permiten mejorar la interaccion con el usuario. Un evento es algo que pasa en el navegador o que es ejecutado por el usuario. Ej: clicks, llenar un formulario, cargar una pagina.

Debemos pensar que primero hay que seleccionar el elemento y luego decidir que queremos que pase con el. Para seleccionar un evento debemos consider el uso del "this" para hacer referencia al elemento especifico. Tambien debemos tener en cuenta usar el preventDefault para evitar una respuesta predeterminada por el navegador.

2 formar para identificar eventos:

*Tenemos eventos que comienzan con "on": onLoad, onClick.

*Eventos con addEventListener que usaran un callback.

Un problema al momento de cargar las paginas es que no queremos que el archivo javascrip se cargue antes que el html. Por eso generalmente se lo suele linkear al final del archivo html. Otra opcion es crear un evento en js que haga que cargue primero el html.

// forma1
window.onload = function(){
}

// forma2
window.addEventListener("load", function() { } )

La diferencia entre ambas es que si utilizo varias veces la forma 1, solo ejecutara la ultima porque pisara las anteriores. Esto no sucede con la forma 2, todas se ejecutaran.

Ahora veamos un ejemplo combinando eventos:

window.addEventListener("load", function(){
      let homeButton = document.querySelector(".home-button")

     homeButton.addEventListener("click", function(){
          alert("tocaste el boton!")
     })
})

// este evento lanzará una alerta cuando se presione el boton

Imaginemos que este boton es un link que dirigira a otra pagina despues de mostrar la alerta. Para evitar que esto suceda debemos usar el metodo preventDefault:

window.addEventListener("load", function(){
      let homeButton = document.querySelector(".home-button")

     homeButton.addEventListener("click", function(e){
          e.preventDefault();
          alert("tocaste el boton!")
     })
})

Eventos con click

Vamos a elegir en este caso un boton, y vamos a ver los distintos eventos alrededor del mouse: clicks, doble clicks, pasar el puntero sobre el boton.

Click

      let homeButton = document.querySelector(".home-button")

     homeButton.addEventListener("click", function(){
          alert("tocaste el boton!")
     })

MouseOver, cuando el puntero pasa por encima del boton

      let homeButton = document.querySelector(".home-button")

     homeButton.addEventListener("mouseover", function(){
          alert("estas sobre el boton!")
     })

MouseOut, cuando el puntero sale despues de estar sobre el boton

      let homeButton = document.querySelector(".home-button")

     homeButton.addEventListener("museout", function(){
          alert("saliste del boton!")
     })

Si quiero agrupar el mismo evento en distintos elementos selecciono la clase que tienen en comun.

window.addEventListener("load",function(){
      let botones= document.querySelectorAll(".buttons")

      for (let i=0; i< botones.length; i++){
            botones[i].addEventListener("click", function(){
 
              this.style.color= "red";
              }
       })
})