Documente Academic
Documente Profesional
Documente Cultură
TUXTLA GUTIERREZ
TOPICOS AVANZADOS DE
PROGRAMACION
INVESTIGACION DE EVENTOS EN
JAVASCRIPT
Tipos de eventos.
Los eventos hacen posible que los usuarios transmitan informacin a los
programas. Java script define numerosos eventos que permiten una interaccin
completa entre el usuario y las paginas/aplicaciones web. La pulsacin de una
tecla constituye un evento, as como pinchar o mover el ratn, seleccionar un
elemento de un formulario, redimensionar la ventana del navegador.
Java Script permite asignar una funcin a cada uno de los eventos. De esta
forma, cuando se produce un evento, Javascript ejecuta su funcin asociada.
Cada vez que se produce un evento, se crea un objeto.
Modelos de eventos
Crear pginas y aplicaciones web siempre ha sido mucho ms complejo
de lo que debera serlo debido a las incompatibilidades entre
navegadores. A pesar de que existen decenas de estndares para las
tecnologas empleadas, los navegadores no los soportan completamente
o incluso los ignoran.
Las principales incompatibilidades se producen en el lenguaje XHTML, en
el soporte de hojas de estilos CSS y sobre todo, en la implementacin de
JavaScript. De todas ellas, la incompatibilidad ms importante se da
precisamente en el modelo de eventos del navegador. As, existen hasta
tres modelos diferentes para manejar los eventos dependiendo del
navegador en el que se ejecute la aplicacin.
Evento
Descripcin
Onblur
Deseleccionar el elemento
<button>, <input>,
<label>, <select>,
<textarea>, <body>
Onchange
<input>, <select>,
<textarea>
Onclick
Ondblclick
Evento
Descripcin
Onfocus
Seleccionar un elemento
<button>, <input>,
<label>, <select>,
<textarea>, <body>
Onkeydown
Elementos de formulario y
<body>
Onkeypress
Elementos de formulario y
<body>
Onkeyup
Elementos de formulario y
<body>
Onload
La pgina se ha cargado
completamente
<body>
onmousedo
wn
onmousem
ove
Mover el ratn
Onmouseou
t
onmouseov
Evento
Descripcin
er
Onmouseup
Onreset
<form>
Onresize
Se ha modificado el tamao de
la ventana del navegador
<body>
Onselect
Seleccionar un texto
<input>, <textarea>
Onsubmit
Enviar el formulario
<form>
Onunload
<body>
GENERACION DE EVENTOS
CONTROL DE EVENTOS
EL control de eventos es para poder controlar que ocurrir cuando se
produce
Ejemplos:
Al cerrar una pgina se muestra mensaje
Al pulsar botn se limpian casillas de texto
MtodosasociadosalaclaseMouseEvent
getClickCount():Devuelveelnmerodeclicksasociadosconelevento.
getX():Devuelvelaposicinxdelmousecuandosegeneraunevento.
getY():Devuelvelaposicinydelmousecuandosegeneraunevento.
MtodosdelaclaseKeyEvent
getKeyChar():Devuelveelcarcterasociadoconlateclaqueprodujoelevento.
getKeyCode():Devuelveelcdigodelateclaqueprodujoelevento.
getKeyModifiersText(int):Devuelveunacadenaqueindicaelmodificadordelatecla,
porejemploShift.
getKeyText(int):Devuelveunacadenaqueindicaeltipodeteclapulsada.Ejmp:F1,
indicandoqueesunatecladefuncin.
LasInterfasesdeescucha(EventListeners)
Parapodercapturartodosloseventos,Javaproporcionalasinterfasesdeescucha
(listeners).
Paracadatipodeeventoexisteunainterfasedeescucha.Ejemplo:
oParaloseventosdetipoActionEventexistelainterfaseescuchaActionListener.
oParaloseventosdetipoMouseEventexistelainterfaseescucha
MouseListener.
MtodosdelaInterfaseMouseListener
mouseClicked(MouseEvente):cuandosehaceunclickderatn
mouseEntered(MouseEvente):cuandoelratnentraenlaaplicacin.
mouseExited(MouseEvente):cuandoelratnsaledelaaplicacin.
mousePressed(MouseEvente):sehapulsadounbotndelratn.
mouseReleased(MouseEvente):sehasoltadounbotndelratn.
MtodosdelaInterfaseWindowListener
windowActivated(WindowEvente):Esinvocadocuandounaventanaesseteada
comolaventanaactiva.
windowClosed(WindowEvente):Esinvocadocuandounaventanahasido
cerrada.
windowClosing(WindowEvente):Esinvocadocuandoelusuariointentacerrarla
ventana.
windowDeactivated(WindowEvente):Esinvocadocuandolaventanadejadeser
laventanaactiva.
windowDeiconified(WindowEvente):Esinvocadocuandounaventanapasade
estadominimizadoanormal
windowIconified(WindowEvente):Esinvocadocuandounaventanavaestado
normalaminimizada.
windowOpened(WindowEvente):Esinvocadolaprimeravezquelaventanase
hacevisible.
MtododelaInterfaseActionListener
actionPerformed(ActionEvente):Esinvocadocuandounaaccinocurre,como
presionarunbotn.
VerConvertMiles.javayHideAndSeek.java
CREACION DE EVENTOS
AqusecentrarelestudioenloseventosdetipoAction,aunquenohayraznalgunapara
quelamismatcnicaseapliqueaeventosdebajonivelcomopuedanserloseventosde
ratnodelteclado.
LaclaseencuestindebeserunasubclasedeComponenty,almenos,debeincluirlos
siguientestresmiembros:
UnavariabledeinstanciaqueesunareferenciaalalistadeobjetosListener
registrados.
Unmtodoparacrearlalistaanterior,queenelejemploesgeneraListaReceptores(),
quesellamaasparailustrarqueelnombrenoestcnicamenteimportante,aunque
porconsistenciaconladocumentacindelModelodeDelegacindeEventos,debiera
llamarseaddActionListener().Estalistahadesergeneradaatravsdeunallamadaal
mtodoAWTEventMulticaster.add(),quedevuelveunareferenciaalalista.
Unmtodoqueinvocaralmtodocorrespondientealtipodeeventoenlaclase
Listenerdelalistadeobjetosreceptoresdeloseventos.Enelejemplo,losobjetos
receptoressondetipoActionListener,asqueelmtodoencuestines
actionPerformed(),yelmtodoqueloinvocaesgeneraEventoAction().Eneste
ejemplosolamentehayunobjetoreceptor,luegoseverotroenelquehabrvarios
objetosreceptoresdeestetipodeeventosenlalista.
onClick
<html>
<head>
<title>Ejemplo onClick</title>
</head>
<body>
<center>
<input type="button" value=" Pulsar boton para saludo... "
onClick="window.alert('Hola mundo!')";>
</center>
</body>
</html>
onLoad
<html>
<head>
<title>Ejemplo onLoad</title>
</head>
<body
onLoad="boton.value='hola!'">
<center>
<input type="button" name="boton" value="" onLoad = "
value= 'hola mundo!' ">
</center>
</body>
</html>
onFocus
<html>
<head>
<title>Ejemplo onFocus</title>
</head>
<body>
<center>
<input type=text" value=" Al coger foco muestra mensaje... "
onFocus="window.alert('Hola mundo!')";>
</center>
</body>
</html>
onResize
<html>
<head>
<title>Ejemplo onLoad</title>
</head>
<body onResize="alert('Hola mundo');">
</body>
</html>
De esa manera podemos crear los eventos en JavaScript.
Los eventos en javascript permiten al programador ms flexibilidad a la
hora de validar datos y restringir movimientos de usuario.