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 suid 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 unaddEventListener 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
});
No hay comentarios:
Publicar un comentario