UT2 DESARROLLO DE APPS MEDIANTE LENGUAJES DE SCRIPT

Interacción con el usuario: eventos

eugeniaperez.es

UT 2: lenguajes de scripting

eugeniaperez.es

interacción con el usuario

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

UT 2: lenguajes de scripting

eugeniaperez.es

interacción con el usuario

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

UT 2: lenguajes de scripting

eugeniaperez.es

EVENTOS DE RATÓN

• Click: pulsamos el botón izquierdo del ratón.  onclick.
• Dblclick.  doble click sobre el botón izquierdo.  ondblclick.
• Mousedown. pulsamos un botón del ratón. onmousedown.
• Mouseover. El puntero del ratón está dentro de un elemento y es desplazado fuera del elemento. onmouseout.
• Mouseover.  al revés que el anterior. onmouseover.
• Mouseup. Soltamos un botón del ratón que previamente teníamos pulsado. onmouseup.

Interacción con el usuario

UT 2: lenguajes de scripting

eugeniaperez.es

EVENTOS DE RATÓN

• Mousemove. Cuando el puntero del ratón se encuentra dentro de un elemento y permanece dentro del mismo. onmousemove.

<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

UT 2: lenguajes de scripting

eugeniaperez.es

EVENTOS DE RATÓN

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

UT 2: lenguajes de scripting

Interacción con el usuario

eugeniaperez.es

EVENTOS DE teclado

• Keydown. Cuando pulsamos una tecla del teclado. Si la mantenemos pulsada el evento se repitirá . onkeydown.
• Keypress. Si pulsamos una tecla de un carácter alfanumérico. onkeypress.
• Keyup. Se produce cuando soltamos una tecla. onkeyup.

UT 2: lenguajes de scripting

Interacción con el usuario

eugeniaperez.es

EVENTOS DE teclado

<input type="text" onkeypress="showMessage()">

function showMessage() {
    alert("You pressed a key inside the input field");
}

UT 2: lenguajes de scripting

Interacción con el usuario

eugeniaperez.es

EVENTOS HTML

• Load. Cuando la página se ha cargado por completo.  onload.
• Unload. Cuando la página se ha desaparecido por completo. onunload.
• Error. Cuando se ha producido un error en JavaScript. onerror.
• Select. Se acciona cuando seleccionamos texto de los cuadros de texto <input> y <textarea>. onselect.
• Change. Cuando los cuadros de texto <input> y <textarea> pierden el foco y el contenido que tenían ha variado. onchange.

UT 2: lenguajes de scripting

Interacción con el usuario

eugeniaperez.es

EVENTOS HTML

• Submit. Cuando pulsamos sobre un botón de este tipo. onsubmit.
• Reset. Cuando pulsamos sobre un botón de tipo reset. onreset.
• Resize. Se produce cuando redimensionamos el navegador. Actúa sobre Window. onresize.
• Scroll. Cuando varía la posición de la barra de scroll.  onscroll.
• Focus. Se produce cuando un elemento obtiene el foco. onfocus.
• Blur. Se produce cuando un elemento pierde el foco. onblur.

UT 2: lenguajes de scripting

Interacción con el usuario

eugeniaperez.es

EVENTOS DOM

• DOMSubtreeModified. Cuando añadimos o elminamos nodos.
• DOMNodeInserted. Añadimos un nodo hijo a un nodo padre.
• DOMNodeRemoved. Eliminamos un nodo que tiene un nodo padre.
• DOMNodeRemovedFromDocument. Cuando eliminamos un nodo del documento.
• DOMNodeInsertedIntoDocument. Cuando añadimos un nodo al documento.

UT 2: lenguajes de scripting

Interacción con el usuario

eugeniaperez.es

EVENTOS DOM

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.  

UT 2: lenguajes de scripting

Interacción con el usuario

eugeniaperez.es

EVENTOS DOM

addEventListener

window.addEventListener("resize",resizeWindow);

function resizeWindow() {
    alert("You've resized the current window...");
}