Diferencia entre revisiones de «Usuario:Juanda/javascript/Eventos»

De WikiEducator
Saltar a: navegación, buscar
(→‎Técnica de los manejadores semánticos=)
 
(24 revisiones intermedias por el mismo usuario no mostrado)
Línea 10: Línea 10:
 
=== Introducción ===
 
=== Introducción ===
 
*Todos los elementos de una página tienen asociados eventos que pueden disparar funciones de JavaScript.
 
*Todos los elementos de una página tienen asociados eventos que pueden disparar funciones de JavaScript.
−
*Hay eventos asociados a la ventana (etiqueta <body>), a los formularios, al ratón, al teclado y a multimedia.
+
*Hay eventos asociados a la ventana (etiqueta <body>), a los formularios... que se disparan por el ratón, el teclado, la carga de una página o la multimedia.
 
*Un mismo tipo de evento puede estar asociado a elementos html diferentes.
 
*Un mismo tipo de evento puede estar asociado a elementos html diferentes.
−
*Aumento considerable de los eventos con html5
+
*Aumento considerable de los eventos con html5: [http://www.w3schools.com/tags/ref_eventattributes.asp Lista de eventos]
−
*[http://www.w3schools.com/tags/ref_eventattributes.asp Lista de eventos]
+
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
Línea 40: Línea 39:
  
 
<div class="slide">
 
<div class="slide">
 +
 
=== Manejadores de eventos===
 
=== Manejadores de eventos===
 
JavaScript permite asignar una función a cada uno de los eventos. De esta forma, cuando se produce cualquier evento, JavaScript ejecuta su función asociada. Este tipo de funciones se denominan "event handlers" en inglés y suelen traducirse por "manejadores de eventos":
 
JavaScript permite asignar una función a cada uno de los eventos. De esta forma, cuando se produce cualquier evento, JavaScript ejecuta su función asociada. Este tipo de funciones se denominan "event handlers" en inglés y suelen traducirse por "manejadores de eventos":
Línea 46: Línea 46:
 
   alert('Gracias por pinchar');
 
   alert('Gracias por pinchar');
 
}
 
}
 +
....
 
<input type="button" value="Pinchame y verás" onclick="muestraMensaje()" />
 
<input type="button" value="Pinchame y verás" onclick="muestraMensaje()" />
 
</html>
 
</html>
Línea 52: Línea 53:
  
 
<div class="slide">
 
<div class="slide">
 +
 
===Captura de errores===
 
===Captura de errores===
 
*El '''evento onerror''' se dispara cuando hay un error de script en la página
 
*El '''evento onerror''' se dispara cuando hay un error de script en la página
Línea 140: Línea 142:
 
<div class="slide">
 
<div class="slide">
 
*Ejemplo de uso de la variable this
 
*Ejemplo de uso de la variable this
−
:Al llamar a una función, debemos pasar this como parámetro.<br>
+
<source lang="html4strict">
 +
<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>
 +
</source>
 +
</div>
 +
 
 +
<div class="slide">
 +
*Javascript mediante función externa
 +
:Muchas ventajas, pero un inconveniente: No se puede utilizar this
 +
:Solución: Al llamar a una función, debemos pasar this como parámetro.<br>
 +
<source lang="html4strict">
 +
<div style="width:150px; height:60px; border:thin solid silver"
 +
  onmouseover="resalta(this)" onmouseout="resalta(this)">
 +
  Sección de contenidos...
 +
</div>
 +
</source>
 +
</div>
 +
 
 +
<div class="slide">
 
:Varios case responden igual debido a las diferentes respuestas de los navegadores.
 
:Varios case responden igual debido a las diferentes respuestas de los navegadores.
 
<source lang="javascript">
 
<source lang="javascript">
Línea 157: Línea 180:
 
   }
 
   }
 
}
 
}
−
+
 
−
<div style="width:150px; height:60px; border:thin solid silver" onmouseover="resalta(this)" onmouseout="resalta(this)">
+
−
  Sección de contenidos...
+
−
</div>
+
 
</source>
 
</source>
  
Línea 172: Línea 192:
 
Al igual que se intentan separar los contenidos (código html) y el diseño (css), se recomienda separar los contenidos, de su comportamiento (JavaScript). Por ejemplo:<br>
 
Al igual que se intentan separar los contenidos (código html) y el diseño (css), se recomienda separar los contenidos, de su comportamiento (JavaScript). Por ejemplo:<br>
 
<source lang="html4strict">
 
<source lang="html4strict">
−
<input id="pinchable" type="button" value="Pinchame y verás" onclick="alert('Gracias por pinchar');" />
+
<input id="pinchable" type="button" value="Pinchame y verás"  
 +
onclick="alert('Gracias por pinchar');" />
 
</source>
 
</source>
 
Se puede transformar en...
 
Se puede transformar en...
Línea 183: Línea 204:
 
   alert('Gracias por pinchar');
 
   alert('Gracias por pinchar');
 
}
 
}
−
// Asignar la función externa al elemento, sin parentesis!!!!!
+
 
−
// se ejecuta una vez que esté cargado todo el DOM (evento onload)
+
−
//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 propiedad
+
−
//onclick de elemento.
+
−
window.onload = function() {
+
−
  document.getElementById("pinchable").onclick = muestraMensaje;
+
−
}
+
 
// Elemento XHTML
 
// Elemento XHTML
 +
<input id="pinchable" type="button" value="Pinchame y verás"
 +
onclick="muestraMensaje()"/>
 +
</source>
 +
 +
*Podemos dar "un paso más" y lograr una separación mayor:
 +
<source lang="javascript">
 +
function muestraMensaje() {
 +
  alert('Gracias por pinchar');
 +
}
 +
...
 
<input id="pinchable" type="button" value="Pinchame y verás" />  
 
<input id="pinchable" type="button" value="Pinchame y verás" />  
 
</source>
 
</source>
−
</div>
 
  
 +
*Usaremos la técnica de los manejadores semánticos...
 +
</div>
 
<div class="slide">
 
<div class="slide">
−
===Técnica de los manejadores semánticos===
+
 
 +
====Técnica de los manejadores semánticos====
 
1. Asignar un identificador único al elemento XHTML mediante el atributo id.<br>
 
1. Asignar un identificador único al elemento XHTML mediante el atributo id.<br>
 
2. Crear una función de JavaScript encargada de manejar el evento.<br>
 
2. Crear una función de JavaScript encargada de manejar el evento.<br>
Línea 205: Línea 231:
  
 
Inconveniente: la página se debe cargar completamente antes de que se puedan utilizar las funciones DOM que asignan los manejadores a los elementos html.  ¡Para ello debemos utilizar el '''evento onload'''!
 
Inconveniente: la página se debe cargar completamente antes de que se puedan utilizar las funciones DOM que asignan los manejadores a los elementos html.  ¡Para ello debemos utilizar el '''evento onload'''!
 +
</div>
 +
 +
<div class="slide">
 +
 +
*Separación de html y javascript
 +
Al igual que se intentan separar los contenidos (código html) y el diseño (css), se recomienda separar los contenidos, de su comportamiento (JavaScript). Por ejemplo:<br>
 +
<source lang="html4strict">
 +
<input id="pinchable" type="button" value="Pinchame y verás"
 +
onclick="alert('Gracias por pinchar');" />
 +
</source>
 +
Se puede transformar en...
 +
</div>
 +
 +
<div class="slide">
 +
<source lang="javascript">
 +
// Función externa
 +
function muestraMensaje() {
 +
  alert('Gracias por pinchar');
 +
}
 +
// Asignar la función externa al elemento, sin parentesis!!!!!
 +
// se ejecuta una vez que esté cargado todo el DOM (evento onload)
 +
//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 propiedad
 +
//onclick de elemento.
 +
window.onload = function() {
 +
  document.getElementById("pinchable").onclick = muestraMensaje;
 +
}
 +
// Elemento XHTML
 +
<input id="pinchable" type="button" value="Pinchame y verás" />
 +
</source>
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
 +
====Ejemplo: resaltar elementos de un formulario al recibir el foco:====
 
<source lang="javascript">
 
<source lang="javascript">
 
function resalta() {
 
function resalta() {
Línea 223: Línea 280:
 
}
 
}
 
</source>
 
</source>
 +
</div>
  
 +
<div class="slide">
 +
=== Obteniendo información de eventos:===
 +
*Mediante el objeto event.
 +
:Windows considera que el objeto proviene del objeto window.
 +
:el resto de navegadores lo muestran como "un parámetro mágico" de la función
 +
 +
<source lang="javascript">
 +
//Solución unificada:
 +
function manejadorEventos(elEvento) {
 +
  var evento = elEvento || window.event;
 +
}
 +
</source>
 
</div>
 
</div>
 +
 +
 +
<div class="slide">
 +
====Ejemplo uso del objeto event:====
 +
<source lang="html4strict">
 +
function resalta(elEvento) {
 +
  var evento = elEvento || window.event;
 +
//el tipo de evento va sin el "on":
 +
  switch(evento.type) {
 +
    case 'mouseover':
 +
      this.style.borderColor = 'black';
 +
      break;
 +
    case 'mouseout':
 +
      this.style.borderColor = 'silver';
 +
      break;
 +
  }
 +
}
 +
 +
window.onload = function() {
 +
  document.getElementById("seccion").onmouseover = resalta;
 +
  document.getElementById("seccion").onmouseout = resalta;
 +
}
 +
 +
<div id="seccion" style="width:150px; height:60px; border:thin solid silver">
 +
  Sección de contenidos...
 +
</div>
 +
 +
</source>
 +
</div>
 +
<div class="slide">
 +
 +
====Eventos de teclado====
 +
*Cuando un usuario pulsa una tecla normal, se producen tres eventos seguidos y en este orden: onkeydown, onkeypress y onkeyup.
 +
:El evento onkeydown se corresponde con el hecho de pulsar una tecla y no soltarla.
 +
:El evento onkeypress es la propia pulsación de la tecla
 +
:El evento onkeyup hace referencia al hecho de soltar una tecla que estaba pulsada.
 +
 +
*La forma más sencilla de obtener la información sobre la tecla que se ha pulsado es mediante el evento onkeypress. Sin embargo no todos los navegadores funcionan igual, existen teclas especiales...
 +
</div>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
<div class="slide">
 +
====Ejemplo eventos teclado====
 +
 +
 +
<source lang="javascript">
 +
window.onload = function() {
 +
  document.onkeyup = muestraInformacion;
 +
  document.onkeypress = muestraInformacion;
 +
  document.onkeydown = muestraInformacion;
 +
}
 +
 +
function muestraInformacion(elEvento) {
 +
  var evento = window.event || elEvento;
 +
 +
  var mensaje = "Tipo de evento: " + evento.type + "<br>" +
 +
                "Propiedad keyCode: " + evento.keyCode + "<br>" +
 +
                "Propiedad charCode: " + evento.charCode + "<br>" +
 +
                "Carácter pulsado: " + String.fromCharCode(evento.charCode);
 +
 +
  info.innerHTML += "<br>--------------------------------------<br>" + mensaje
 +
}
 +
 +
...
 +
 +
<div id="info"></div>
 +
</source>
 +
</div>
 +
 +
<div class="slide">
 +
* Solución independiente del navegador:
 +
<source lang="javascript">
 +
function manejador(elEvento) {
 +
  var evento = elEvento || window.event;
 +
  var caracter = evento.charCode || evento.keyCode;
 +
  alert("El carácter pulsado es: " + String.fromCharCode(caracter));
 +
}
 +
 +
document.onkeypress = manejador;
 +
</source>
 +
</div>
 +
 +
<div class="slide">
 +
==== Ejemplos eventos de ratón ====
 +
<source lang="javascript">
 +
function muestraInformacion(elEvento) {
 +
  var evento = elEvento || window.event;
 +
  var coordenadaX = evento.clientX;
 +
  var coordenadaY = evento.clientY;
 +
/*las coordenadas respecto a la pantalla serían:
 +
var coordenadaX = evento.screenX;
 +
var coordenadaY = evento.screenY;
 +
*/
 +
  alert("Has pulsado el ratón en la posición: " + coordenadaX + ", " + coordenadaY);
 +
}
 +
 +
document.onclick = muestraInformacion;
 +
</source>
 +
</div>
 +
 +
 +
 
</div>
 
</div>

Última revisión de 20:51 14 oct 2012



Eventos

Introducción

  • Todos los elementos de una página tienen asociados eventos que pueden disparar funciones de JavaScript.
  • Hay eventos asociados a la ventana (etiqueta <body>), a los formularios... que se disparan por el ratón, el teclado, la carga de una página o la multimedia.
  • Un mismo tipo de evento puede estar asociado a elementos html diferentes.
  • Aumento considerable de los eventos con html5: Lista de eventos
  • Eventos habituales en el body: 
onload			Esperando a que la página se cargue por completo
onUnload		Cuando el usuario abandona la página
  • Eventos habituales sobre distintas etiquetas, para animaciones: 
onMouseOver             Cuando el ratón está sobre el elemento 
onMouseOut		Cuando el ratón se mueve fuera del elemento 
onClick                 Al hacer clic con el ratón
  • Eventos de formularios 
onFocus			Un elemento coge el foco	 		
onBlur			Un elemento pierde el foco
onChange		Un elemento cambia
onSubmit		Para validar los campos de un formulario antes de enviarlos
...

Manejadores de eventos

JavaScript permite asignar una función a cada uno de los eventos. De esta forma, cuando se produce cualquier evento, JavaScript ejecuta su función asociada. Este tipo de funciones se denominan "event handlers" en inglés y suelen traducirse por "manejadores de eventos": 

function muestraMensaje() {
  alert('Gracias por pinchar');
}
....
<input type="button" value="Pinchame y verás" onclick="muestraMensaje()" />
</html>

Captura de errores

  • El evento onerror se dispara cuando hay un error de script en la página
  • Se debe crear una función que maneje el error.
  • La función se llama desde el manejador de eventos de onerror con 3 argumentos:
msg (mensaje de error)
url (la url de la página que ha causado el error)
line (la línea en la que ha ocurrido el error).
  • Ejemplo captura de error con onerror: 
<html>
	<head>
		<script type="text/javascript">
			onerror=handleErr;
			var txt="";
			function handleErr(msg,url,l)
			{
				txt="Ha habido un error en esta página.\n\n";
				txt+="Error: " + msg + "\n";
				txt+="URL: " + url + "\n";
				txt+="Línea: " + l + "\n\n";
				txt+="Pulsa ok para continuar.\n\n";
				alert(txt);
				return true;
			}
			function mensaje()
			{
				adddlert("¡Bienvenido!");
			}
		</script>
	</head>
	<body>
		<input type="button" value="View message" onclick="mensaje()" />
	</body>
</html>

try....catch y throw

Se pueden lanzar errores mediante throw: 

<html>
	<body>
		<script type="text/javascript">
			var x=prompt("Introduce un número entre 0 y 10:","");
			try
			{ 
				if(x>10) 
					throw "Error1";
				else if(x<0)
					throw "Error2";
			} 
			catch(er)
			{
				if(er=="Error1") 
					alert("¡Error! El valor es muy alto");
				if(er == "Error2") 
					alert("¡Error! El valor es muy bajo"); 
			}
		</script>
	</body>
</html>

Uso de la variable this

Modificamos los bordes del elemento al pasar el ratón por encima: 

<div id="contenidos" style="width:150px; height:60px; border:thin solid silver">
  Sección de contenidos...
</div>

Uso de this para referirse al elemento o etiqueta html 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>
  • Ejemplo de uso de la variable this 
<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>
  • Javascript mediante función externa
Muchas ventajas, pero un inconveniente: No se puede utilizar this
Solución: Al llamar a una función, debemos pasar this como parámetro.
<div style="width:150px; height:60px; border:thin solid silver" 
   onmouseover="resalta(this)" onmouseout="resalta(this)">
  Sección de contenidos...
</div>
Varios case responden igual debido a las diferentes respuestas de los navegadores. 
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;
  }
}


Separación de html y javascript

Al igual que se intentan separar los contenidos (código html) y el diseño (css), se recomienda separar los contenidos, de su comportamiento (JavaScript). Por ejemplo:

<input id="pinchable" type="button" value="Pinchame y verás" 
onclick="alert('Gracias por pinchar');" />

Se puede transformar en... 

// Función externa
function muestraMensaje() {
  alert('Gracias por pinchar');
}
 
// Elemento XHTML
<input id="pinchable" type="button" value="Pinchame y verás" 
onclick="muestraMensaje()"/>
  • Podemos dar "un paso más" y lograr una separación mayor: 
function muestraMensaje() {
  alert('Gracias por pinchar');
}
...
<input id="pinchable" type="button" value="Pinchame y verás" />
  • Usaremos la técnica de los manejadores semánticos...

Técnica de los manejadores semánticos

1. Asignar un identificador único al elemento XHTML mediante el atributo id.
2. Crear una función de JavaScript encargada de manejar el evento.
3. Asignar la función externa al evento correspondiente en el elemento deseado.

Dentro de las funciones externas asignadas sí que se puede utilizar la variable this para referirse al elemento que provoca el evento.

Inconveniente: la página se debe cargar completamente antes de que se puedan utilizar las funciones DOM que asignan los manejadores a los elementos html. ¡Para ello debemos utilizar el evento onload!

  • Separación de html y javascript

Al igual que se intentan separar los contenidos (código html) y el diseño (css), se recomienda separar los contenidos, de su comportamiento (JavaScript). Por ejemplo:

<input id="pinchable" type="button" value="Pinchame y verás" 
onclick="alert('Gracias por pinchar');" />

Se puede transformar en... 

// Función externa
function muestraMensaje() {
  alert('Gracias por pinchar');
}
// Asignar la función externa al elemento, sin parentesis!!!!!
// se ejecuta una vez que esté cargado todo el DOM (evento onload)
//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 propiedad 
//onclick de elemento.
window.onload = function() {
  	document.getElementById("pinchable").onclick = muestraMensaje;
}
// Elemento XHTML
<input id="pinchable" type="button" value="Pinchame y verás" />

Ejemplo: resaltar elementos de un formulario al recibir el foco:

function resalta() {
  // Código JavaScript
}
 
window.onload = function() {
  var formulario = document.getElementById("formulario");
  var camposInput = formulario.getElementsByTagName("input");
 
for(var i=0; i<camposInput.length; i++) {
    if(camposInput[i].type == "text") {
      camposInput[i].onclick = resalta;
    }
  }
}

Obteniendo información de eventos:

  • Mediante el objeto event.
Windows considera que el objeto proviene del objeto window.
el resto de navegadores lo muestran como "un parámetro mágico" de la función 
//Solución unificada:
function manejadorEventos(elEvento) {
  var evento = elEvento || window.event;
}


Ejemplo uso del objeto event:

function resalta(elEvento) {
  var evento = elEvento || window.event;
//el tipo de evento va sin el "on":
  switch(evento.type) {
    case 'mouseover':
      this.style.borderColor = 'black';
      break;
    case 'mouseout':
      this.style.borderColor = 'silver';
      break;
  }
}
 
window.onload = function() {
  document.getElementById("seccion").onmouseover = resalta;
  document.getElementById("seccion").onmouseout = resalta;
}
 
<div id="seccion" style="width:150px; height:60px; border:thin solid silver">
  Sección de contenidos...
</div>

Eventos de teclado

  • Cuando un usuario pulsa una tecla normal, se producen tres eventos seguidos y en este orden: onkeydown, onkeypress y onkeyup.
El evento onkeydown se corresponde con el hecho de pulsar una tecla y no soltarla.
El evento onkeypress es la propia pulsación de la tecla
El evento onkeyup hace referencia al hecho de soltar una tecla que estaba pulsada.
  • La forma más sencilla de obtener la información sobre la tecla que se ha pulsado es mediante el evento onkeypress. Sin embargo no todos los navegadores funcionan igual, existen teclas especiales...





Ejemplo eventos teclado

window.onload = function() {
  document.onkeyup = muestraInformacion;
  document.onkeypress = muestraInformacion;
  document.onkeydown = muestraInformacion;
}
 
function muestraInformacion(elEvento) {
  var evento = window.event || elEvento;
 
  var mensaje = "Tipo de evento: " + evento.type + "<br>" +
                "Propiedad keyCode: " + evento.keyCode + "<br>" +
                "Propiedad charCode: " + evento.charCode + "<br>" +
                "Carácter pulsado: " + String.fromCharCode(evento.charCode);
 
  info.innerHTML += "<br>--------------------------------------<br>" + mensaje
}
 
...
 
<div id="info"></div>
  • Solución independiente del navegador: 
 
function manejador(elEvento) {
  var evento = elEvento || window.event;
  var caracter = evento.charCode || evento.keyCode;
  alert("El carácter pulsado es: " + String.fromCharCode(caracter));
}
 
document.onkeypress = manejador;

Ejemplos eventos de ratón

 
function muestraInformacion(elEvento) {
  var evento = elEvento || window.event;
  var coordenadaX = evento.clientX;
  var coordenadaY = evento.clientY;
/*las coordenadas respecto a la pantalla serían:
var coordenadaX = evento.screenX;
var coordenadaY = evento.screenY;
*/
  alert("Has pulsado el ratón en la posición: " + coordenadaX + ", " + coordenadaY);
}
 
document.onclick = muestraInformacion;


Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/javascript/Eventos&oldid=9858»