El documento describe los diferentes modelos de gestión de eventos en JavaScript a lo largo del tiempo, incluyendo el modelo de registro de eventos en línea, el modelo de registro de eventos tradicional, y el modelo de registro avanzado según el W3C. Explica conceptos como la propagación de eventos, el uso de this, y cómo registrar, eliminar y disparar manualmente eventos en cada modelo.

1. Eventos en JavaScript

2. Eventos
 JavaScript fue diseñado para añadir interactividad a las páginas.
 Cuando el usuario hace algo se produce un evento. Algunos eventos que no están relacionados
directamente con acciones de usuario: p.ej. el evento load de un documento, que se produce
automáticamente cuando un documento ha sido cargado.
 La gestión de eventos se popularizó a raíz de la versión 2 de Netscape. El resto de los
navegadores, incluido el Internet Explorer, tuvieron que adaptarse a la forma en la que Netscape 2
y 3 gestionaban los eventos.
 Aunque hoy en día la técnica de gestión de eventos varía con el objetivo de independizar el
código de JavaScript de la estructura HTML, los navegadores todavía son compatibles con las
técnicas utilizadas por Netscape.
 Anteriormente a las versiones 4 de los navegadores, los eventos (interacciones del usuario con el
sistema), eran capturados preferentemente por gestores de eventos definidos como atributos en
las etiquetas HTML (modelo de eventos en línea). P. ej, cuando un usuario hace clic en un botón,
se disparaba el evento onclick que se había programado en la etiqueta HTML. Ese evento hacía
una llamada a una función en la que se realizaban las operaciones programadas por el usuario.
 Aunque todo ese modo de gestión de eventos sigue funcionando, los navegadores modernos ya
incorporan un modelo de gestión de eventos, que proporciona la información sobre cómo ocurre
un evento.
 Hoy en día, debido a las diferencias que hay entre todos los navegadores actuales, no se
recomiendan ni esto, ni el modelo de detección basado en DHTML. Por lo tanto, hay que intentar
usar modelos de detección de eventos estándar y que sean los navegadores los que tengan que
adaptarse a ese modelo.

3. Modelo de registro de eventos en línea
 En el modelo de registro de eventos en línea (estandarizado por
Netscape), el evento es añadido como un atributo más a la etiqueta
HTML del objeto sobre el cual se quiere controlar un determinado
suceso, como en el siguiente ejemplo en el que al hacer clic en el
enlace, se llama al gestor de eventos onClick y se ejecuta el script, que
contiene en este caso una alerta de JavaScript.
<a href="pagina.html" onClick="alert('Has pulsado en el
enlace')">Pulsa aquí</a>
 A continuación, hacemos lo mismo pero llamando a una
función:
<a href="pagina.html" onClick="alertar()">Pulsa aquí</a>
//siendo la función alertar()
function alertar(){
alert("Has pulsado en el enlace");
}

4. Modelo de registro de eventos en línea
 No es recomendable usar el modelo de registro de eventos en
línea. Tiene el problema de que estamos mezclando la
estructura de la página web con la programación de la misma.
 Hoy en día se intenta separar la programación en JavaScript de
una página de su estructura HTML, al igual que intentamos
separar lo que es contenido de lo que es aspecto.
 En el ejemplo anterior, al hacer clic en el enlace se mostrará la
alerta y a continuación se conectará con la página pagina.html.
En ese momento desaparecerán de memoria los objetos que
estaban en un principio, cuando se originó el evento. Esto puede
ser un problema ya que si, por ejemplo, la función a la que
llamamos tiene que realizar varias tareas, éstas tendrían que
hacerse antes de que nos conecte con la nueva página.
 Este modo de funcionamiento ha sido un principio muy
importante en la gestión de eventos. Si un evento genera la
ejecución de un script y además también se genera la acción por
defecto para ese objeto entonces:
◦ El script se ejecutará primero.
◦ La acción por defecto se ejecutará después.

5.  A veces es interesante bloquear o evitar que se ejecute la acción por defecto. Por
ejemplo, en el caso anterior podríamos evitar que nos conecte con la nueva página.
Cuando programamos un gestor de eventos, ese gestor podrá devolver un valor true o
false usando la instrucción return true o return false. False quiere decir "no ejecutes la
acción por defecto". En el ejemplo anterior,
<a href="pagina.html" onclick="alertar();return false">Pulsa
aquí</a>
 Al pulsar en el enlace realizará la llamada a la función alertar() y cuando termine
ejecutará la instrucción return false, que le indicará al navegador que no ejecute la
acción por defecto asignada a ese objeto (en este caso la acción por defecto de un
hiperenlace es conectarnos con la página especificada en el atributo href).
 También sería posible hacer que nos preguntara si queremos o no ir a la página de
destino. Eso podríamos hacerlo sustituyendo el script del evento por una llamada a una
función que solicite una confirmación usando la función global confirm.
<a href="pagina.html" onclick="confirmar()">Pulsa aquí</a>
//siendo la función confirmar()
function confirmar(){
return confirm("¿Deseas cambiar a la página indicada?");
} //ANULACIÓN DE LA ACCIÓN POR DEFECTO USANDO CONFIRM()
Cuando se utiliza este modelo de registro de eventos, la última instrucción del script NO
termina en ;.
Modelo de registro de eventos en línea

6. Modelo de registro de eventos tradicional
 En los navegadores antiguos, el modelo utilizado era el modelo en línea. Con la
llegada de DHTML, el modelo se extendió para ser más flexible. En este nuevo
modelo el evento pasó a ser una propiedad del elemento, de modo que el
siguiente código de JavaScript es aceptado por los navegadores modernos.
elemento.onclick = hacerAlgo;
// cuando el usuario haga click en el objeto, se llamará a la función
hacerAlgo()
//REGISTRO DE EVENTOS TRACICIONAL
No usamos paréntesis en la función hacerAlgo. El método onclick espera que se
le asigne una función completa. Si hiciéramos element.onclick = hacerAlgo(); la
función sería ejecutada y el resultado devuelto por esa función sería asignado a la
propiedad onclick del elemento. Pero esto no es lo que queremos que haga,
queremos que se ejecute la función cuando se dispare el evento.
 Esta forma de registro no fue estandarizada por elW3C, pero todavía es
válida hoy en día debido a que fue ampliamente utilizada por Netscape y
Microsoft. La ventaja de este modelo es que podemos asignar un evento a un
objeto desde JavaScript, con lo que ya estamos separando el código de la
estructura. Fíjate que aquí los nombres de los eventos sí que van siempre en
minúsculas.
 Para eliminar un gestor de eventos de un elemento u objeto, le asignamos null.
elemento.onclick = null;
// cuando el usuario haga click en el objeto, no se lama a ninguna
función
//ANULACIÓN DE UN GESTOR DE EVENTOS

7.  Una ventaja es que, como el gestor de eventos es una función, podremos realizar una llamada
directa a ese gestor, con lo que estamos disparando el evento de forma manual. Por ejemplo:
elemento.onclick();
// disparamos el evento click de forma manual. Ejecuta la función hacerAlgo
// DISPARO DEL EVENTO DE FORMA MANUAL
 En el modelo en línea podíamos utilizar la palabra reservada this cuando programamos el
gestor de eventos, tal y como se indica en el siguiente ejemplo:
<a href="pagina.html" id="mienlace" onClick="alertar(this)">Pulsa aqui</a>
//siendo la función alertar
function alertar(objeto) {
alert("Te conectaremos con la página: "+objeto.href); }
}
//USO DE THIS EN EL GESTOR DE EVENTOS EN LÍNEA
<a href="pagina.html" id="mienlace">Pulsa aqui</a>
//siendo el script
document.getElementById("mienlace").onclick = alertar; //programamos el evento
function alertar() {
alert("Te conectaremos con la página: "+this.href);
}
//USO DE THIS EN EL MODELO DE GESTOR DE EVENTOS TRADICIONAL
Se emplea this dentro de la función alertar, sin pasar ningún objeto (tal y como hacíamos en el modelo
en línea). En el modelo tradicional, el this que está dentro de la función, hace referencia al objeto donde
hemos programado el evento.También hay que destacar que en este modelo es importante que el
hiperenlace sea declarado antes de programar la asignación onclick, ya que si por ejemplo escribimos el
hiperenlace después del bloque de código de JavaScript, éste no conocerá todavía el objeto y no le podrá
asignar el evento de onclick. Esto último se podría solucionar programando la asignación de eventos a
los objetos en una función que se ejecute en el momento en que el documento esté completamente
cargado programando el evento onload del objeto window. Por ejemplo con
window.onload=asignarEventos.
Modelo de registro de eventos tradicional

8.  También podemos lograr que se realicen
llamadas a más de una función cuando se
produzca el evento. Esto lo podemos hacer de
la siguiente forma:
elemento.onclick = function ( ) {
llamada1( );
llamada2( );
};
//PROGRAMANDO UN EVENTO MULTIFUNCIÓN
 Después de asignar una función a una
propiedad de un objeto hay que poner un
punto y coma después de la llave de cierre.
Modelo de registro de eventos tradicional

9. Modelo de registro avanzado de eventos
según W3C
 El W3C, en su especificación del DOM de nivel 2, pone
especial atención a los problemas del modelo tradicional de
registro de eventos y ofrece una forma sencilla de registrar
sobre un objeto determinado los eventos que queramos. La
clave para poder hacer todo eso está en el método
addEventListener().
 Este método tiene tres argumentos:
◦ El tipo de evento.
◦ La función a ejecutar.
◦ Un valor booleano (true o false).
 El último argumento se utiliza para indicar en qué momento
se deben ejecutar las acciones asociadas al evento:
◦ En la fase de captura (true).
◦ En la fase de propagación (false).
Más adelante se verá la diferencia

10. elemento.addEventListener('evento', función, false|true);
//SINTAXIS DEL MÉTODO ADDEVENTLISTENER
 Por ejemplo para registrar la función alertar() de los ejemplos anteriores,
haríamos:
document.getElementById("mienlace").addEventListener('click',
alertar,false);
function alertar(){
alert("Te conectaremos con la página: "+this.href);
}
//MÉTODO ADDEVENTLISTENER
 La ventaja de este método, es que podemos añadir tantos eventos como
queramos. Por ejemplo:
document.getElementById("mienlace").addEventListener('click',
alertar,false);
document.getElementById("mienlace").addEventListener('click',
avisar,false);
document.getElementById("mienlace").addEventListener('click',
chequear,false);
//MÉTODO ADDEVENTLISTENER PARA AÑADIR MÚLTIPLES EVENTOS
Modelo de registro avanzado de eventos segúnW3C

11.  Por lo tanto, cuando hagamos clic en "mienlace" se
disparará la llamada a las tres funciones. Por cierto, el
W3C no indica el orden de disparo, por lo que no
sabemos cuál de las tres funciones se ejecutará primero.
Fíjate también, que el nombre de los eventos en el
método addEventListener no comienza con "on".
 En este modelo podemos usar funciones anónimas (sin
nombre de función), tal y como se muestra en el
siguiente ejemplo:
elemento.addEventListener('click', function () {
this.style.backgroundColor = '#cc0000';
}, false);
// MÉTODO ADDEVENTLISTENER USANDO FUNCIÓN ANÓNIMA
 En este modelo se puede usar la palabra this de la
misma forma que en el modelo tradicional.
Modelo de registro avanzado de eventos segúnW3C

12.  Uno de los problemas de la implementación del modelo de registro del
W3C es que no podemos saber con antelación los eventos que hemos
registrado en un elemento.
 En el modelo tradicional si hacemos alert(elemento.onclick);, nos
devuelve:
◦ undefined - si no hay funciones registradas para ese evento, o bien,
◦ el nombre de la función que hemos registrado para ese evento.
 En este modelo no podemos hacer esto.
 ElW3C, en el reciente nivel 3 del DOM, introdujo un método llamado
eventListenerList que almacena una lista de las funciones que han sido
registradas en un elemento.Hay que tener cuidado con este método,
porque no está soportado por todos los navegadores.
 Para eliminar un evento de un elemento, usaremos el método
removeEventListener(), cuya sintaxis se muestra en el siguiente ejemplo:
elemento.removeEventListener('evento', función, false|true);
//SINTAXIS DEL MÉTODO REMOVEEVENTLISTENER
 Sin embargo, si lo que queremos es cancelar el comportamiento por defecto de
un determinado objeto (como en los ejemplos de la diapositiva 5 este modelo
nos proporciona el método preventDefault().
Modelo de registro avanzado de eventos segúnW3C

13.  Microsoft también ha desarrollado un modelo de registro de eventos. Es
similar al utilizado por el W3C, pero tiene algunas modificaciones importantes.
 Para registrar un evento, tenemos que enlazarlo con attachEvent():
elemento.attachEvent('onclick', hacerAlgo);
//SINTAXIS DEL MÉTODO ATTACHEVENT()
 Si se necesita dos gestores para el mismo evento:
elemento.attachEvent('onclick', hacerUnaCosa);
elemento.attachEvent('onclick', hacerOtraCosa);
 Para eliminar un evento, se hará con detachEvent():
elemento.detachEvent('onclick', hacerAlgo);
//SINTAXIS DEL MÉTODO DETACHEVENT()
 Si comparando este modelo con el del W3C tenemos dos diferencias
importantes:
 Los eventos siempre se propagan hacia arriba, no hay fase de captura (no hay
tercer argumento para seleccionar el modo).
 La función que gestiona el evento está referenciada, no copiada, con lo que la
palabra reservada this siempre hará referencia al objeto window y no se
podrá utilizar para conocer el elemento que lanzó el evento.
Modelo de registro avanzado de eventos según Microsoft

14. Eventos(https://www.w3schools.com/jsref/dom_obj_event.asp)
Eventos
Evento Se produce cuando…
onblur Un elemento pierde el foco.
onchange El contenido de un campo cambia.
onclick Se hace clic con el ratón en un objeto.
ondblclick Se hace doble clic con el ratón sobre un objeto.
onerror Hay algún error al cargar un documento o una imagen.
onfocus Un elemento tiene el foco.
onkeydown Se presiona una tecla del teclado.
onkeypress Se presiona una tecla o se mantiene presionada.
onkeyup Cuando soltamos una tecla.
onload Una página o imagen terminaron de cargarse.
onmousedown Se presiona un botón del ratón.
onmousemove Se mueve el ratón sobre un elemento.
onmouseout Movemos el ratón fuera de un elemento.
onmouseover El ratón se mueve sobre un elemento.
onmouseup Se libera un botón del ratón.
onresize Se redimensiona una ventana o marco.
onselect Se selecciona un texto.
onunload El usuario abandona una página.

15. Orden de disparo de los eventos
 En el modelo DOM, los objetos del HTML se asemejan a un árbol que partiendo de la
raíz (objeto document)
 En un documento XHTML podemos tener un objeto que está contenido dentro de
otro, este último a su vez dentro de otro, y un largo etcétera.
 Imagina que tenemos un elemento contenido dentro de otro elemento y que tenemos
programado el mismo tipo de evento para ambos (por ejemplo el evento clic). ¿Cuál de
ellos se disparará primero?
 Sorprendentemente, esto va a depender del tipo de navegador que tengamos.
 Si el usuario posiciona el ratón sobre la zona central que abarca el Elemento 2 y realiza
un clic con el ratón, lanzará el evento clic en ambos elementos. ¿Pero cuál de ellos se
disparará primero?, ¿cuál es el orden en el que se van a ejecutar las acciones asociadas a
estos eventos?
Tenemos dos Modelos propuestos:
• Netscape dijo que el evento en el Elemento1 tendrá lugar
primero. Es lo que se conoce como "captura de eventos".
• Microsoft dijo que el evento en el Elemento2 tendrá
preferencia. Es lo que se conoce como bubbling
"propagación hacia arriba de eventos".
Los dos modelos son claramente opuestos. Internet Explorer
sólo soporta el segundo modelo. Mozilla, Opera 7 y
Konqueror soportan los dos modelos.Y las versiones antiguas
de Opera e iCab no soportan ninguno.

16.  W3C decidió tomar una posición intermedia.Así supone
que, cuando se produce un evento primero se producirá la
fase de captura hasta llegar al elemento de destino, y luego
se producirá la fase de propagación hacia arriba en el modelo
del DOM. Este modelo es el estándar, que todos los
navegadores deberían seguir para ser compatibles entre sí.
 Si se usa el método addEventListener podrás decidir
cuando quieres que se registre el evento: en la fase de
captura o en la fase de burbujeo. Para ello tendrás que dar el
valor true o false, respectivamente, al tercer parámetro. Por
ejemplo:
Orden de disparo de los eventos: modeloW3C

17. Orden de disparo de los eventos: modelo W3C
elemento1.addEventListener('click',hacerAlgo1,true);
//elemento1 representa la caja verde
elemento2.addEventListener('click',hacerAlgo2,false);
//elemento2 representa la caja amarilla
 Si el usuario hace clic en el elemento2 ocurrirá lo siguiente:
◦ 1. El evento clic comenzará en la fase de captura.
◦ 2. El gestor de eventos comprueba si hay algún ancestro del elemento2 en el
árbol del DOM que tenga programado un evento onclick para la fase de captura
(true).
◦ 3. El gestor de eventos encuentra un elemento1.hacerAlgo1() que ejecutará
primero, pues su tercer argumento tiene un valor true.
◦ 4. El evento viajará hacia el destino (elemento2), pero no encontrará más
eventos para la fase de captura. Entonces el evento pasa a la fase de propagación,
y ejecuta hacerAlgo2(), el cual está programado para esta fase (con un valor false
en su tercer argumento).
◦ 5. El evento viaja hacia arriba de nuevo y chequea si algún ancestro tiene
programado ese evento para la fase de propagación. Éste no será el caso, por lo
que no hará nada más.
◦ 6. Para detener la propagación del evento en la fase de propagación,
disponemos del método stopPropagation(). En la fase de captura es imposible
detener la propagación.