Índice: Tema 3.5
3.5 El modelo de eventos de JavaScript
3.5.1 Eventos en JavaScript
3.5.2 Manejadores de eventos
3.5.3 El objeto event
3 5 4 Ti
3.5.4 Tipos de eventos
t
d
Índice: Tema 3.5
3.5 El modelo de eventos de JavaScript
3.5.1 Eventos en JavaScript
3.5.2 Manejadores de eventos
3.5.3 El objeto event
3 5 4 Ti
3.5.4 Tipos de eventos
t
d
3.5
3.5.1
EL MODELO DE EVENTOS DE JAVASCRIPT
EVENTOS EN JAVASCRIPT
El modelo de eventos de JavaScript
JavaScript, además de ser un lenguaje basado en objetos, es también un lenguaje
de programación conducido por eventos.
Los scripts de JavaScript que aparecen en las páginas web se pueden ejecutar de
dos formas:
• Durante la interpretación del código de la página, a medida que se van encontrando las
instrucciones ejecutables (incluyendo posiblemente invocaciones de funciones).
• Al producirse determinados eventos para los que se han previsto acciones concretas
(scripts de código asociado).
En el primer método el código se ubica dentro de la etiqueta script sin estar
asociado a ningún evento (Ejercicio 1).
)
i ú
i d
( j
i i
Vamos a analizar aquí con más detenimiento este segundo método de ejecución
de código: ocurrencia de eventos.
ó
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3
3.5
3.5.1
EL MODELO DE EVENTOS DE JAVASCRIPT
EVENTOS EN JAVASCRIPT
Eventos y manejadores de eventos
Un evento es una señal que se dispara al producirse algún cambio.
• Los eventos son provocados la mayor parte de las veces por las acciones del usuario (a
medida que maneja el ratón o el teclado).
• Aunque también pueden ser provocados por otros tipos de cambios en el entorno, como
los que ocurren durante el procesamiento del documento recibido (fin de la carga del
d
)
documento, abandono de la página, etc…).
b d
d l
á i
t
t
Cuando tiene lugar un evento se ejecuta automáticamente el script asociado a su
manejador (cada evento tiene asociado un manejador)
manejador (cada evento tiene asociado un manejador).
Por defecto los manejadores de eventos no tienen scripts asociados, de forma que
no se ha e nada
ando se prod en
no se hace nada cuando se producen.
Somos nosotros los que tenemos que asociar scripts a los manejadores de los
eventos que queramos controlar.
t
t
l
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
4
3.5
3.5.1
EL MODELO DE EVENTOS DE JAVASCRIPT
EVENTOS EN JAVASCRIPT
Tipos de eventos (1)
Eventos de ratón: Soportados por todos los elementos.
Pulsar y soltar el ratón.
Pinchar dos veces seguidas con el ratón.
Pulsar un botón del ratón y no soltarlo.
click
dblclick
mousedown
mousemove Mover el ratón.
mouseout
mouseout
mouseover
mouseup
El ratón sale del elemento
El ratón sale del elemento.
El ratón entra en el elemento.
Soltar el botón del ratón.
Eventos de teclado: Soportados por todos los elementos de formulario y <body>.
keydown
keydown
keypress
keyup
Pulsar una tecla y no soltarla
Pulsar una tecla y no soltarla.
Pulsar una tecla.
Soltar una tecla pulsada.
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
5
3.5
3.5.1
EL MODELO DE EVENTOS DE JAVASCRIPT
EVENTOS EN JAVASCRIPT
Tipos de eventos (2)
Eventos de carga: <body>.
Interrumpir la carga de una imagen antes de ser cargada.
Produce un error durante la carga de una imagen.
Terminar la carga del documento.
Abandonar el documento.
abort
error
load
unload
move
resize
scroll
Eventos de ventana: <body>.
Desplazar la ventana.
Cambiar el tamaño de la ventana.
Hacer scroll en el documento.
Eventos de enfoque: <body>, <button>, <input>, <label>, <select> y <textarea>.
blur
focus
Deseleccionar el elemento.
Seleccionar el elemento.
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
6
3.5
3.5.1
EL MODELO DE EVENTOS DE JAVASCRIPT
EVENTOS EN JAVASCRIPT
Tipos de eventos (3)
Eventos de formulario
change
t
reset
select
submit
i i
li
Deseleccionar un elemento que se ha modificado (<input>, <select> y
<textarea>).
>)
Inicializar el formulario (<form>).
I
l f
Seleccionar un texto (<input> y <textarea>).
Enviar el formulario (<form>).
)
(<f
(
l
i
Los manejadores de dichos eventos se llaman igual, pero añadiendo el prefijo
“on” delante. Por ejemplo:
onclick
onblur
onkeypress
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
7
3.5
3.5.1
EL MODELO DE EVENTOS DE JAVASCRIPT
EVENTOS EN JAVASCRIPT
EJERCICIO 28
Tipos de eventos (4)
Probar el lanzamiento de diferentes eventos asociando al correspondiente
manejador del evento una función que muestre el mensaje “Evento lanzado”.
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
8
3.5
3.5.1
EL MODELO DE EVENTOS DE JAVASCRIPT
EVENTOS EN JAVASCRIPT
Propagación de eventos (1)
Existen determinados eventos que solo son relevantes para unos elementos
determinados:
• Por ejemplo, el evento submit se produce sobre un <form>, pero no afecta a otras
clases de objetos como <textarea>, etc…
Sin embargo, hay otros eventos que son relevantes a varios elementos. Entonces,
¿qué ocurre si asociamos scripts a los mismos manejadores de evento de varios
elementos anidados?
• Por ejemplo, si se asocian distintos manejadores al evento click del cuerpo y de un
párrafo dentro del cuerpo. ¿Qué ocurre al hacer click sobre el párrafo?
Respuesta: Por defecto, los eventos se van propagando hacia arriba por la
jerarquía de contenidos y todos los objetos antecesores tienen la posibilidad de
responder al evento (siempre que sea relevante) hasta llegar al objeto raíz
responder al evento (siempre que sea relevante) hasta llegar al objeto raíz.
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
9
3.5
3.5.1
EL MODELO DE EVENTOS DE JAVASCRIPT
EVENTOS EN JAVASCRIPT
EJERCICIO 29
Propagación de eventos (2)
Analizar cómo se propaga el evento click asociando una alerta diciendo dónde
se ha pulsado a los manejadores onclick del cuerpo, los dos párrafos y los
elementos negrita y cursiva de la siguiente página web.
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
10
Índice: Tema 3.5
3.5 El modelo de eventos de JavaScript
3.5.1 Eventos en JavaScript
3.5.2 Manejadores de eventos
3.5.3 El objeto event
3 5 4 Ti
3.5.4 Tipos de eventos
t
d
EL MODELO DE EVENTOS DE JAVASCRIPT
3.5
3.5.2 MANEJADORES DE EVENTOS
Manejadores de eventos
Cada evento se dispara cuando se da la condición asociada y se produce sobre un
determinado objeto.
Los componentes de la página web descritos en su archivo como elementos HTML
tienen asociado un objeto JavaScript durante la visualización de la página.
Para que el objeto de un elemento HTML reaccione a un determinado evento que
se produzca sobre él, hay que asociar al correspondiente manejador el script
adecuado. Esto se puede hacer de diferentes formas:
• Como atributos: Código JavaScript dentro de un atributo del propio elemento HTML. El
código también se puede ubicar en una función externa y proporcionar su nombre como
atributo
atributo.
• Manejadores semánticos: Asignados mediante el DOM sin necesidad de modificar el
código HTML de la página.
p g
g
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
12
EL MODELO DE EVENTOS DE JAVASCRIPT
3.5
3.5.2 MANEJADORES DE EVENTOS
Manejadores como atributos (1)
La forma más sencilla de incluir un manejador de evento es mediante un atributo
HTML con el mismo nombre del manejador del evento que se quiere procesar.
El contenido del atributo es una cadena de texto que contiene todas las
instrucciones JavaScript que se ejecutan cuando se produce el evento.
<input type="button" value="Botón" onclick="alert('Hiciste click')" />
Cuando el código de la función manejadora es más complejo, es aconsejable
agrupar todo el código JavaScript en una función externa:
agrupar todo el código JavaScript en una función externa:
function myfunc() {
l
li k')
alert('Hiciste click');
t('Hi i t
<script>
}
</script>
<input type="button" value="Botón" onclick="myfunc()" />
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
13
EL MODELO DE EVENTOS DE JAVASCRIPT
3.5
3.5.2 MANEJADORES DE EVENTOS
Manejadores como atributos (2)
En los eventos de JavaScript, se puede utilizar la palabra reservada this para
referirse al elemento HTML sobre el que se está ejecutando el evento:
<div id="micaja" style="width:200px; height:200px; background-color:black"
onmouseover = "document.getElementById('micaja').style.backgroundColor='red'"
onmouseout = "document.getElementById('micaja').style.backgroundColor='black'">
</div>
Mediante el uso de this, este código puede reescribirse sin necesidad de utilizar las
f
funciones del DOM para acceder al objeto correspondiente:
d l DOM
l bj t
di
d
t
i
<div id="micaja" style="width:90px; height:90px; background-color:black"
onmouseover = "this.style.backgroundColor = 'red'"
d'"
onmouseout = "this.style.backgroundColor = 'black'">
dC l
"thi
t l
b
k
'
</div>
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
14
EL MODELO DE EVENTOS DE JAVASCRIPT
3.5
3.5.2 MANEJADORES DE EVENTOS
Manejadores como atributos (3)
En las funciones externas no es posible utilizar la variable this directamente, por lo
que hay que pasarla como parámetro a la función manejadora:
function funCaja(objmicaja) {
switch(objmicaja.style.backgroundColor) {
switch(objmicaja.style.backgroundColor) {
case 'black':
case 'rgb(0,0,0)':
case '#000000':
objmicaja.style.backgroundColor = 'red';
break;
case (('red')||('rgb(255,0,0)')||('#FF0000')):
objmicaja.style.backgroundColor = 'black';
break;
alert("El color inicial no es no rojo ni negro");
default:
}
}
<div id="micaja" style="width:200px; height:200px; background-color:black"
onmouseover = "funCaja(this)"
onmouseout = "funCaja(this)">
</div>
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
15
EL MODELO DE EVENTOS DE JAVASCRI
Crear cuenta
Comentarios de: 3.5 El modelo de eventos de JavaScript (0)
No hay comentarios