Tema 4.2.

Modelo de objetos del documento. Event

• Gestión de Eventos
- Manejadores como atributos de elementos HTML
- Manejadores de eventos como funciones externas
- Manejadores de eventos semánticos
• Objeto Event
- Captura de eventos
- Flujo de eventos
- Supresión de eventos
- Cancelación de eventos
- Eliminación de eventos
- Generar eventos
 Tema 4.2.
Modelo de objetos del documento. Event
Gestión de Eventos
 El modelo de eventos fue estandarizado por el W3C en DOM Level 2
 Un mismo tipo de evento puede estar definido para varios
elementos HTML diferentes y un mismo elemento HTML puede tener
asociados varios eventos distintos

• Evento  Acción que desencadena un usuario cuando interactúa con la página

clik, load
• Manejador de eventos  Captura los eventos y llama a funciones JavaScript
que los ejecuta. Acción que desencadenará la rutina
onclick, onload
• Controlador de eventos  Ejecuta un segmento de código basado en eventos
que ocurren dentro de la aplicación
• Listener  Escuchador de eventos. El objeto recibe una notificación del tipo de
evento que le ocurre
 Tema 4.2.
Modelo de objetos del documento. Event
Gestión de Eventos

Cuando ocurre un evento hay un manejador de eventos asociado

que se encarga de capturar el evento y manejarlo.

Existen varias formas diferentes de indicar los manejadores:

• Manejadores como atributos de los elementos HTML
• Manejadores como funciones JavaScript externas
• Manejadores "semánticos“
 Tema 4.2.
Modelo de objetos del documento. Event
Gestión de Eventos
Manejadores como atributos de elementos HTML: NO
• Método más sencillo y menos aconsejable
• El código se incluye en un atributo del propio elemento HTML

<button name="boton" value=“Saludar" onClick="alert(‘Hola’)

onmouseover="alert(‘Sirve para saludar’);”>
<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>

JavaScript define la variable especial this, se crea automáticamente. Se puede utilizar para
referirse al elemento HTML que ha provocado el evento

<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>

Este método no debe utilizarse debido a que mezcla la lógica de la programación JavaScript con el
marcado HTML con las consecuencias que eso conlleva.
 Tema 4.2.
Modelo de objetos del documento. Event
Gestión de Eventos
Manejadores de eventos como funciones externas: NO
Consiste en extraer todas las instrucciones de JavaScript del archivo HTML y agruparlas en
una función externa
<div style="width:150px;height:60px; border:thin solid silver"
onmouseover="resalta(this)" onmouseout="resalta(this)">
</div>

Al pasar this como parámetro, es posible acceder de forma directa desde la función
externa a las propiedades del elemento que ha provocado el evento
function resalta(elemento){
switch(elemento.style.borderColor) {
case 'silver':
elemento.style.borderColor = 'black';
break;
case 'black':
elemento.style.borderColor = 'silver';
break;
}
}
 Tema 4.2.
Modelo de objetos del documento. Event
Gestión de Eventos
Manejadores de eventos semánticos: NO
• Es una evolución del método de las funciones externas. Se basa en las
propiedades DOM de HTML para asignar todas las funciones externas que actúan de
manejadores de eventos
• La página se debe cargar completamente antes de que se puedan utilizar las
funciones DOM
<button id="boton" onclick="alert(‘Hola’)>Saludar</button>
Se puede transformar en:

// Elemento HTML
<button id=“boton“>Saludar</button>

// Asignar la función externa al elemento

document.getElementById(“boton").onclick = muestraMensaje;

// Función externa
function muestraMensaje() {
alert('Hola');
}
 Tema 4.2.
Modelo de objetos del documento. Event
Gestión de Eventos
Manejadores de eventos semánticos

• El único inconveniente de este método es que la página se debe cargar

completamente antes de que se puedan utilizar las funciones DOM que asignan los
manejadores a los elementos XHTML. Una de las formas más sencillas de asegurar
que cierto código se va a ejecutar después de que la página se cargue por completo
es utilizar el evento onload:
window.onload = function()
{ document.getElementById("pinchable").onclick = muestraMensaje; }

• En el ejemplo, se añaden eventos a los elementos de tipo input=text de un formula

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;
}
}}
 Tema 4.2.
Modelo de objetos del documento. Event
Gestión de Eventos
Manejadores de eventos semánticos
Es posible definir manejadores de eventos que devuelvan true o false en función
de algunos parámetros. Por ejemplo se puede diseñar un limitador del número de
caracteres que se pueden escribir en un <textarea>
function limita(maximoCaracteres) {
var elemento = document.getElementById("texto");
if(elemento.value.length >= maximoCaracteres ) {
return false;
}
else {
return true;
}
}
<textarea id="texto" onkeypress="return limita(5);"></textarea>

Impide que se escriba ningún carácter en el objeto ya que el manejador de eventos devuelve
false
<textarea onkeypress="return false;"></textarea>
 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event

Normalmente, los manejadores de eventos requieren información adicional para procesar

sus tareas. Si se produce el evento onclick, quizás necesite saber en qué posición estaba el
ratón en el momento de pinchar el botón.
Es el teclado el que necesita conocer más información adicional (la tecla que se ha
pulsado, diferenciar las teclas normales de las teclas especiales..).

Para eso existe el objeto especial llamado Event.

Cuando ocurre un evento se crea dinámicamente y automáticamente un objeto de evento
y es pasado secuencialmente a las "escuchas" (listeners) autorizadas para su gestión.
Entonces el objeto event del DOM es accesible por la función de manejo como único
argumento
 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event

DOM Event tiene dos objetivos principales:

1. Diseñar un sistema de eventos genérico que describe el flujo de eventos a través
de una estructura de árbol y proporciona información contextual básica para
cada evento
2. Proporcionar un subconjunto común de los sistemas de eventos utilizados en los
navegadores existentes para fomentar la interoperabilidad

(Arch. Propiedades y Métodos DOM sobre event)

La referencia del objeto del evento se pasa a la función que maneja el evento
como un parámetro predefinido, llamado event
 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event
Captura de eventos. addEventListener

La captura de eventos es el proceso mediante el cual un EventListener

registrado en un objeto padre puede interceptar eventos recibidos por éste.
Ventaja: captura eventos sobre cualquier elemento del DOM

addEventListener  Añade un capturador de eventos

elemento_a_escuchar.addEventListener('evento',función[,booleano])

elemento_a_escuchar cualquier elemento presente en un documento (id,

etiqueta, propiedades de otro nodo)
evento suceso ocurrido sobre el elemento, con o sin interacción
del usuario (OJO!! Sin el on. Ejemplo: ‘click’)
función cualquier función definida que queramos que se ejecute
cuando ocurra el evento.
booleano define el orden del flujo de eventos
true captura del evento de padre a hijos, false de hijo a
padres
 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event
Captura de eventos
addEventListener
Es la forma de registrador un escuchador de eventos, como se especifica en
W3C DOM
Sus beneficios son los siguientes:
• Permite agregar más de un listener a un solo evento
• Da un control más detallado de la fase en la que el oyente se activa
(capturando o burbujeando)
• Funciona en cualquier elemento del DOM, no únicamente con
elementos de HTML. Ejemplo4
 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event
Captura de eventos

En la llamada a addEventListener, se puede poner como segundo

parámetro el nombre de la función, o se puede incrustar la función:

document.getElementById('zonainteractiva').addEventListener('click',()=>{al
ert('¡Alerta!');
});

En lugar de:
document.getElementById('zonainteractiva').addEventListener('click',alerta)
;

function alerta(){
alert('¡Alerta!');

}
 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event
Captura de eventos
<p>
Aquí se capturan eventos asociados
a un <span id="miSpan">elemento</span> HTML
</p>

let miSpan=document.getElementById("miSpan");
let veces=0;
miSpan.addEventListener("click",()=>{
veces++;
console.log(`El usuario ha hecho ${veces} clic en el span`);
})
 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event
Captura de eventos
En la definición de la función llamada desde addEventListener, se le puede pasar
como parámetro una variable que referenciará al objeto que ha recibido el evento:
(más adelante lo usaremos luego con la propiedad target):

miSpan.addEventListener("click",(objetoEvento)=>{
console.log(objetoEvento);
})
 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event
Captura de eventos
Propiedades del objeto evento:
Propiedad Utilidad
altKey Devuelve si la tecla [Alt| fue pulsada durante el evento.

Button Devuelve el botón del ratón que activó el evento:

0: botón principal.
1: botón central.
Utilidad
2: botón secundario.
3y 4: cuarto y quinto botones (si los hubiera).
charCode
Contiene el valor Unicode de la tecla que se pulsó (evento keypress).
Client Coordenada X del ratón con respecto a la ventana.

clíentY Coordenada Y del ratón con respecto a la ventana.

ctrlKey Devuelve si la tecla [Ctrl] fue pulsada durante el evento.

Pagex Coordenada X del evento, relativa al documento completo.

pageY Coordenada Y del evento, relativa al documento completo.

 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event
Captura de eventos
Propiedades del objeto evento:
Propiedad Utilidad
ScreenX Coordenada X del evento con respecto a la pantalla.

ScreenY Coordenada Y del evento con respecto a la pantalla.

shiftKey Devuelve si la tecla [Mayús] fue pulsada durante el evento.

Target Referencia al elemento que lanzó el evento.

timeStamp Devuelve el momento en el que se creó el evento.

type Nombre del evento.

 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event
Flujo de eventos

Como hemos visto, hay un parámetro el addEventListener que es un

booleano. ¿Para qué sirve? Tiene que ver con el flujo de eventos.
Supongamos que tenemos:
<section>
<p>
Aquí se capturan eventos asociados
a un <span id="miSpan">elemento</span> HTML
</p>
</section>

Cuando hacemos clic en span no sólo lo estamos haciendo sobre él, sino
sobre p y sobre section. Si sólo hay una función asignada a una escucha para
el span no hay mayor problema, pero si además hay una para p y otra para el
section, ¿cuál es el orden en que se deben lanzar las tres funciones?
 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event
Flujo de eventos

A esto da respuesta el flujo de eventos

let miSection=document.getElementsByTagName("section")[0];
let miP=document.getElementsByTagName("p")[0];
let miSpan=document.getElementById("miSpan");
miSection.addEventListener("click",()=>{
console.log("<section>:Capturando el evento");
})
miP.addEventListener("click",()=>{
console.log("<p>:Capturando el evento");
})
miSpan.addEventListener("click",()=>{
console.log("<span>:Capturando el evento");
})

Por defecto, se propaga desde el elemento más interno al más externo. Pero
hay dos formas, según el siguiente cuadro ( según el tercer argumento de
addeventListener):
 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event
Flujo de eventos

• Burbuja. Por defecto. Esta propagación se

va dando del elemento más interno al
más externo, hasta window (false)
• Captura. La propagación se realiza de
elementos padre hasta llegar al más
window
interno (true) Captura
document

html

body

div

p Burbuja
input

button
 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event
Flujo de eventos

Método Captura:
let miSection=document.getElementsByTagName("section")[0];
let miP=document.getElementsByTagName("p")[0];
let miSpan=document.getElementById("miSpan");
miSection.addEventListener("click",()=>{
console.log("<section>:Capturando el evento");
},true);
miP.addEventListener("click",()=>{
console.log("<p>:Capturando el evento");
},true);
miSpan.addEventListener("click",()=>{
console.log("<span>:Capturando el evento");
},true);

En este caso, el flujo de evento se propaga de fuera a dentro.

 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event
Supresión de eventos
stopPropagation
Evita la propagación adicional del evento actual en las fases de captura
y burbuja a través del árbol evento.stopPropagation()
let miSection=document.getElementsByTagName("section")[0];
let miP=document.getElementsByTagName("p")[0];
let miSpan=document.getElementById("miSpan");
let veces=0;
miSection.addEventListener("click",()=>{
console.log(`<section>:Capturando el evento ${veces} veces`);
});
miP.addEventListener("click",()=>{
console.log(`<p>:Capturando el evento ${veces} veces`);
});
miSpan.addEventListener("click",(evento)=>{
veces++;
console.log(`<span>:Capturando el evento ${veces} veces`);
if (veces>1)
evento.stopPropagation(); La propagación se produce sólo la primera vez que
}); se clica sobre el elemento. La segunda vez se
ejecuta stopPropagation
 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event
Cancelación de Eventos
preventDefault
Muchos elementos del DOM incorporan funciones que se ejecutarán de forma
predeterminada cuando interactúas con ellos e inicias un evento. Por ejemplo, <a>
tiene por defecto asociado el evento click. Para evitarlo, hay que capturar el evento
y anular su comportamiento.
evento.preventDefault()
let miEnlace=document.getElementsByTagName("a")[0];
En este ejemplo, aunque
miEnlace.addEventListener("click",(evento)=>{
evento.preventDefault(); se pulse el hipervínculo,
}); no ejecuta nada.

Pero así se cancela el comportamiento por defecto, no el evento en sí. Para eso se utiliza
removeEventListener.
 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event
Eliminación de Eventos

removeEventListener
Elimina un evento de la lista de eventos registrados con addEventListener.
La anulación no se puede hacer cuando la definición de un evento se hace con
una función anónima, sólo es posible cuando se utilizan funciones con
identificador.
objeto.removeEventListener(tipo, función)

tipo tipo de evento del que se está removiendo un detector de

evento
función función del manejador de evento a eliminar del objeto
 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event
Eliminación de eventos

Quita el controlador de eventos especificado del elemento actual

elemento_escuchado.removeEventListener('evento',función_a_anular);

function miCallback(){
console.log("evento anulado tras su primera ejecucion");
miSpan.removeEventListener("click",miCallback);
} Se ejecuta una vez la función, y a
let miSpan=document.getElementById("miSpan");
continuación se elimina el evento
miSpan.addEventListener("click",miCallback);
 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event
Generar eventos

No sólo podemos asignar controladores a eventos que se producen, sino que

también podemos generar eventos desde javascript.

Constructor de eventos
Podemos crear objetos Event así:

let event = new Event(type[, options]);

dispatchEvent
Después de que se crea un objeto de evento, debemos “ejecutarlo” en un elemento
usando dispatchEvent. Luego, los controladores reaccionan como si fuera un evento
normal del navegador.
Lanza un evento en el sistema de eventos. El evento está sujeto al mismo
comportamiento y capacidades que si fuera un evento de lanzamiento directo
objeto.dispatchEvent(evento)
 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event
Generar eventos

Ejemplo:
<a id="miEnlace" href="google.es">Enlace</a>
<span id="miSpan">Ejecutar el evento del enlace</span>

let miSpan=document.getElementById("miSpan");
let miEnlace=document.getElementById("miEnlace");
miEnlace.addEventListener("click",(evento)=>{
evento.preventDefault();
console.log("Gestor del evento del enlace");
});
miSpan.addEventListener("click",()=>{
let miEvento=new Event("click");
console.log("Lanzando evento");
miEnlace.dispatchEvent(miEvento);
});
 Tema 4.2.
Modelo de objetos del documento. Event
Objeto Event

PRÁCTICA 1

Crea una página como la siguiente, donde al pulsar cada botón incrementa o
drecrement la Etiqueta. Además, cada vez que se pulse del ratón dentro de la
zona verde o azul, se incrementa la etiqueta “Has hecho click X veces”. El botón
Borrar pone a 0 el contador y la etiqueta anterior.