Páginas

▼
▼

sábado, 3 de agosto de 2019

JavaScript eventos de ratón 2

En una entrada anterior hemos visto cómo trabajar con botones añadiendo algo de código js en el html de la página. Vea el artículo:

JavaScript eventos de ratón 1

Ahora vamos a añadir un "escuchador" de eventos en JavaScript que nos permite estar atentos a los eventos de ratón.
gif animado creado con GifCam.exe

HTML

Ahora el button lleva su id pero no lleva ninguna función de JavaScript. De esta forma el código html es más limpio y no se mezcla con código js.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>Eventos2</title>  
  </head>  
  <body>  
    <h1>Manejando Eventos</h1>  
    <h3>Sin añadir código JS en el HTML</h3>  
    <p>Ahora disponemos de un "escuchador" en el código JavaScript.</p>  
    <p>  
     <button id="boton">Púlsame</button>  
    </p>  
    <hr>  
   <!--scripts-->  
   <script src="eventos2.js"></script>  
  </body>  
 </html>

JavaScript

El escuchador es un addEventListener que lleva una función de callback.

 'use strict'  
 function cambiaColor(){  
   let bg=boton.style.backgroundColor;  
   if(bg=="green"){  
     boton.style.background="red";  
   }else{  
     boton.style.background="green";  
   }  
 }  
   
 var boton=document.querySelector("#boton");  
 boton.style.padding="10px";  
 boton.style.border="1px solid #cdcdcd"; //gris  
   
 // evento click  
 boton.addEventListener('click',function(){ //función callback  
   cambiaColor();  
 });  
   
 // evento mouseover  
 boton.addEventListener('mouseover',function(){  
   boton.style.background="yellow";  
 });  
   
 // evento mouseout  
 boton.addEventListener('mouseout',function(){  
   boton.style.background="#ddd";//el mismo gris que el original en Chrome  
 });
en

No hay comentarios:

Publicar un comentario