Interacción con el usuario: eventos
eugeniaperez.es
eugeniaperez.es
Se realiza a partir de eventos que representan los cambios en una aplicación web.
Los eventos se sitúan en componentes de la página HTML -> click en botón...
Para controlar un evento necesitamos un manejador. Un manejador es una palabra reservada que indica la acción que va a manejar.
Interacción con el usuario
eugeniaperez.es
En el caso del evento onclick:
Normalmente se suele llamar a una función:
<button onclick="this.innerHTML=Date()">The time is?</button>
<button onclick="displayDate()">The time is?</button>
<p id="demo"></p>
<script type="text/javascript" src="js/events.js" ></script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
Interacción con el usuario
eugeniaperez.es
Interacción con el usuario
eugeniaperez.es
<p ondblclick="helloWorld()">Double-click</p>
<div onmousemove="setCoordinates(event)" onmouseout="clearCoordinates()"></div>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid black;
}
</style>
Interacción con el usuario
Nos permite obtener las coordenadas del cursor
eugeniaperez.es
function helloWorld() {
document.getElementById("demo").innerHTML = "Hello World";
}
function setCoordinates(e) {
var x = e.clientX;
var y = e.clientY;
var coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML = coor;
}
function clearCoordinates() {
document.getElementById("demo").innerHTML = "";
}
Interacción con el usuario
Interacción con el usuario
eugeniaperez.es
Interacción con el usuario
eugeniaperez.es
<input type="text" onkeypress="showMessage()">
function showMessage() {
alert("You pressed a key inside the input field");
}
Interacción con el usuario
eugeniaperez.es
Interacción con el usuario
eugeniaperez.es
Interacción con el usuario
eugeniaperez.es
Interacción con el usuario
eugeniaperez.es
Para detectar este tipo de eventos producidos sobre elementos del DOM, se debería declarar un Listener sobre el cuerpo, o el contenedor específico a observar.
addEventListener(): registra un evento a un objeto específico, que puede ser un elemento en un archivo, el mismo documento, una ventana, etc.
Interacción con el usuario
eugeniaperez.es
addEventListener
window.addEventListener("resize",resizeWindow);
function resizeWindow() {
alert("You've resized the current window...");
}
eugeniaperez.es
Sintaxis de JS II