Eventos JS

Mer av detta

CONSTRUCCIÓN SOSTENIBLE

av KAREN LUCERO RAMOS SILVA

HISTORIA DE LA TABLA PERIODICA

av Karen Garcia

Introducción a SOLIDWORKS

av Luis Fernando Perez Sanchez

LOS GRAFICOS ESTADISTICOS

av ANGIE KATERINE KAMMERER MEZA (:-)

Eventos JS

Manejadores de eventos

Variable this

En los eventos, se puede utilizar la variable this para referirse al elemento XHTML que ha provocado el evento

<div id="contenidos" style="width:150px; height:60px; border:thin solid silver"

onmouseover="document.getElementById('contenidos').style.borderColor='black';"

onmouseout="document.getElementById('contenidos').style.borderColor='silver';">

Sección de contenidos...

</div>

El código anterior es demasiado largo y demasiado propenso a cometer errores.

<div id="contenidos" style="width:150px; height:60px; border:thin solid silver"

onmouseover="this.style.borderColor='black';"

onmouseout="this.style.borderColor='silver';">

Sección de contenidos...

</div>

Manejadores "semánticos"

Técnica

document.getElementById("pinchable").onclick = muestraMensaje;

Una de las formas más sencillas de asegurar que cierto código se va aejecutar después de que la página se cargue por completo es utilizar el evento onload

window.onload = function() {

document.getElementById("pinchable").onclick = muestraMensaje;

}

El único inconveniente de este método es que la página se debe cargar completamenteantes de que se puedan utilizar las funciones DOM que asignan los manejadores a loselementos XHTML.

La gran ventaja de este método es que el código XHTML resultante es muy "limpio", yaque no se mezcla con el código JavaScript

Si se añaden los paréntesis después del nombre de la función, en realidad se estáejecutando la función y guardando el valor devuelto por la función en la propiedadonclick de elemento.

// Asignar una función externa a un evento de un elemento

document.getElementById("pinchable").onclick = muestraMensaje;

// Ejecutar una función y guardar su resultado en una propiedad de un elemento

document.getElementById("pinchable").onclick = muestraMensaje();

Asignar la función externa al evento correspondiente en el elemento deseado

Crear una función de JavaScript encargada de manejar el evento

Asignar un identificador único al elemento XHTML mediante el atributo id

Se basa en utilizar las propiedades DOM de los elementos XHTML para asignar todas lasfunciones externas que actúan de manejadores de eventos

// Función externa

function muestraMensaje() {

alert('Gracias por pinchar');

}

// Asignar la función externa al elemento

document.getElementById("pinchable").onclick = muestraMensaje;

// Elemento XHTML

<input id="pinchable" type="button" value="Pinchame y verás" />

Manejadores como funciones JavaScript externas

El principal inconveniente de este método es que en las funciones externas no se puedeseguir utilizando la variable this y por tanto, es necesario pasar esta variable comoparámetro a la función

function resalta(elemento) {

switch(elemento.style.borderColor) {

case 'silver':

case 'silver silver silver silver':

case '#c0c0c0':

elemento.style.borderColor = 'black';

break;

case 'black':

case 'black black black black':

case '#000000':

elemento.style.borderColor = 'silver';

break;

}

}

<div style="width:150px; height:60px; border:thin solid silver"

onmouseover="resalta(this)" onmouseout="resalta(this)">

Sección de contenidos...

</div>

Si se realizan aplicaciones complejas, como por ejemplo la validación de un formulario,es aconsejable agrupar todo el código JavaScript en una función externa y llamar a estafunción desde el elemento XHTML.

function muestraMensaje() {

alert('Gracias por pinchar');

}

<input type="button" value="Pinchame y verás" onclick="muestraMensaje()" />

Manejadores como atributos de los elementos XHTML

En este caso, el código se incluye en un atributo del propio elemento XHTML

<input type="button" value="Pinchame y verás" onclick="alert('Gracias por

pinchar');" />

Los scripts se dedican a esperar a que el usuario "haga algo" (que pulse una tecla, que mueva el ratón, que cierre la ventana del navegador). A continuación, el script responde a la acción del usuario normalmente procesando esa información y generando un resultado.

Modelo básico de eventos

Cada elemento o etiqueta XHTML define su propia lista de posibleseventos que se le pueden asignar

onunload

Se abandona la página (por ejemplo alcerrar el navegador)

onsubmit

Enviar el formulario

onselect

Seleccionar un texto

, </p>

onresize

Se ha modificado el tamaño de laventana del navegador

onreset

Inicializar el formulario (borrar todossus datos)

onmouseup

Soltar el botón que estaba pulsado enel ratón

onmouseover

El ratón "entra" en el elemento (pasapor encima del elemento)

onmouseout

El ratón "sale" del elemento (pasa porencima de otro elemento)

onmousemove

Mover el ratón

onmousedown

Pulsar (sin soltar) un botón del ratón

onload

La página se ha cargadocompletamente

onkeyup

Soltar una tecla pulsada

onkeypress

Pulsar una tecla

onkeydown

Pulsar una tecla (sin soltar)

Elementos de formulario y

onfocus

Seleccionar un elemento

ondblclick

Pinchar dos veces seguidas con el ratón

onclick

Pinchar y soltar el ratón

Todos los elementos

onchange

Deseleccionar un elemento que se hamodificado

, , </p>

onblur

Deseleccionar el elemento

, , ,, , <body></p>