 |
Tutorial HTML-CSS-JAVASCRIPT appsRegnare.com |
 |
|
Tutorial HTML-CSS-JAVASCRIPT appsRegnare.com |
|
Los eventos nos permiten interactuar con el cliente, otorgan dinamismo al sitio web. Al hacer click en un botón se produce un evento. Podemos agregar eventos al pasar el mouse por encima de alguna etiqueta html, etc. Los eventos se gestionan mediante código javascript. Pueden definirse eventos para el objeto window, para el objeto document como así también para elementos en su interior. Css también define un evento, que es la pseudo-clase :hover muy utilizada, que permite dar formato de estilos a un elemento html cuando pasamos el mouse por encima del mismo. Veamos un ejemplo:
Css :hover
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi página</title>
<style>
p {
color: grey;
}
p:hover {
color: red;
}
</style>
</head>
<body>
<h2>Css :hover</h2>
<p>El color del texto dentro de esta etiqueta cambia a rojo al pasar el mouse por encima.</p>
</body>
</html>
Definimos en el ejemplo anterior un estilo para todas las etiquetas p de manera que aplique un formato de color gris al texto. Usamos p:hover para establecer un formato de color únicamente cuando el mouse se sitúa por encima de la etiqueta.
Ejemplo de evento del objeto window
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi página</title>
<script>
window.addEventListener('load', mensaje, false);
function mensaje()
{
alert("Bienvenido");
}
</script>
</head>
<body>
<h2>Ejemplo de evento del objeto window</h2>
</body>
</html>
El método addEventListener del objeto window permite "adjuntar" un evento al mismo. En el ejemplo anterior definimos el evento para cuando finalice de cargar la página (load) que ejecute la función mensaje(). El tercer parámetro tiene el valor por defecto: false (evento en modo bubbling=burbujeo).
Podemos adjuntar un evento al objeto document para que muestre el mismo mensaje al hacer click.
Ejemplo de evento del objeto document
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi página</title>
<script>
document.addEventListener('click', mensaje, false);
function mensaje()
{
alert("Bienvenido");
}
</script>
</head>
<body>
<h2>Ejemplo de evento del objeto document</h2>
</body>
</html>
También podemos adjuntar un evento a algún elemento del documento.
Ejemplo de evento en elemento html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi página</title>
<script>
window.addEventListener('load', inicializar_evento, false);
function inicializar_evento()
{
document.getElementById("mybtn1").addEventListener('click', mensaje, false);
}
function mensaje()
{
alert("Bienvenido");
}
</script>
</head>
<body>
<h2>Ejemplo de evento de elemento html</h2>
<input type="button" id="mybtn1" value="clickeame" />
</body>
</html>
En el ejemplo anterior debemos esperar a que termine la carga de la página para acceder al elemento "mybtn1". Luego le adjuntamos el evento click, para que muestre el mensaje de alerta.
Así como adjuntamos eventos mediante el método addEventListener podemos también quitarlos con el método removeEventListener
Quitar eventos: removeEventListener
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi página</title>
<script>
document.addEventListener('mousemove', mostrar_coord, false);
function mostrar_coord(ev)
{
document.getElementById("div_coord").innerText = ev.clientX+" "+ev.clientY;
}
function remover_evento()
{
document.removeEventListener('mousemove', mostrar_coord);
}
</script>
</head>
<body>
<h2>Quitar eventos agregados con removeEventListener</h2>
<input type="button" id="mybtn1" value="clickeame para remover evento" onclick="remover_evento()" />
<p>Coordenadas del mouse:</p>
<div id="div_coord"></div>
</body>
</html>
El evento mousemove se produce al mover el mouse. Al producirse el evento se llama a la función mostrar_coord(ev) que accede al elemento con id "div_coord", al cual se le modifica el texto mostrando las coordenadas X - Y que recibe del evento: ev.clientX y ev.clientY respectivamente.
| ← Anterior | Siguiente → |