Diseño Web

Documentación técnica:
Eventos
2 de 19
Índice
1. Introducción …………………………..…………………………………………..…………………………
………………5
2. Objeto event …………………………………..…………………………..……………………………………….….…6
2.1. Propiedades ………………………………………………………………………………………………………6
2.2. Métodos ………………………………………………………………………………………………………………7
3. Tipos de eventos ………………………………………………………………………………………………………9
3.1. Eventos de ratón ………………………………………………………………………………

………………9
3.2. Eventos de teclado ……………………………………………………………………………………10
3.3. Eventos de formulario …………………………………………………………………

………………11
3.4. Eventos de ventana ………………………………………………………………………

………………12
3.5. Otros eventos ………………………………………………………………………………… ……………12
4. Manejadores …………………………………………………………………………………………………
….…………13
4.1. Manejadores de atributos ……………………………………………………………

………………13
4.2. Manejadores como funciones externas ………………………………

………………13
4.3. Manejadores semánticos …………………………………………………………………………14
4.4. This …………………………………………………………………………………………………………….………14
5. Eventos personalizados ………………………………………………………………………………………16
6. Flujo de eventos ………………………………………………………………………………………………………17

4 de 19
1. Introducción
Consideramos un evento, normalmente, como aquel suceso que ocurre en un

sistema cuando un usuario realiza una acción, aunque también hay eventos del
sistema, que se disparan cuando ocurre alguna condición. Un evento por si sólo
carece de utilidad, es necesario que vaya asociado a una función que actúe en
consecuencia al evento.
El número de eventos reconocibles con los que trabaja JS es muy extenso,

veremos los principales.
5 de 18
2. Objeto event
Cada evento está representado por un objeto de tipo event que se basa en el
interfaz event del DOM. Estos objetos pueden disponer de propiedades y
funciones personalizadas. También las propiedades y métodos pueden variar
dependiendo del navegador utilizado, no todos los navegadores reconocen la
misma información. Veremos los conceptos más generales, y puede que sea
necesaria alguna adaptación para algún navegador en concreto.
Un objeto event se crea de forma automática cuando se produce el evento, y se

elimina también automáticamente cuando se han ejecutado todas las funciones
manejadoras del evento. Este objeto event es el que se pasa como parámetro a las
funciones manejadoras del evento.
2.1. Propiedades
Existen varios tipos de propiedades: asociadas a las teclas del teclado, a los
botones del ratón, al puntero del ratón, a las características del evento en sí, al
flujo del evento… Veamos alguna de las más interesantes.
• event.button: devuelve el botón del ratón pulsado (0 ningún botón, 1 botón

izquierdo, 2 botón derecho, 3 derecho e izquierdo, 4 botón central, 5
izquierdo y central, 6 derecho y central, 7 los tres botones).
• event.cancelable: booleano que indica si el evento se puede cancelar.
• event.charCode: valor Unicode de una tecla de carácter que fue apretada
como parte de un evento keypress.
• event.detail: detalles sobre el evento.
• event.isChar: booleano que indica si el evento es una tecla de carácter.
• event.keyCode: valor Unicode de una tecla.
• event.clientX: posición horizontal del evento.
• event.clientY: posición vertical del evento.
• event.pageX: coordenada horizontal del evento en el documento completo.
• event.pageY: coordenada vertical del evento en el documento completo.
• event.screenX: coordenada horizontal del evento en la pantalla.
• event.screenY : coordenada vertical del evento en la pantalla.
• event.timeStamp: devuelve el momento de creación del evento.
6 de 18
2. Objeto event
Ejemplo:
<html>
<body onclick="coordenadas(event)">
<p> Ejemplo de propiedades de Objeto Evento.</p>
<p> ****************************************</p>
<p> Pincha con el ratón sobre la ventana para ver las coordenadas</p>
<script>
function coordenadas(p) {
var x = p.clientX;
var y = p.clientY;
alert("Has pulsado el ratón en la posición: " + x + ", " +
y);
}
</script>
</body>
</html>
2.2. Métodos
Algunos de los métodos más interesantes:
• event.initEvent: Inicia el valor de un evento creado vía DocumentEvent.

• event.initMouseEvent: Inicia un evento del ratón una vez que se ha creado.
• event.preventDefault : Cancela el evento (si es cancelable).
• event.stopPropagation: detiene la propagación de los eventos más allá en
el DOM.
Ejemplo:
<html>
<body>
<script>
function simula(event) {
var x = document.createEvent("MouseEvent");
x.initMouseEvent("mouseover");
document.getElementById("linea").dispatchEvent(x);
}
</script>
<p>Ejemplo de método del objeto event</p>
7 de 18
2. Objeto event
<p>Añadimos un * al mover el ratón sobre la linea inferior, o al

simularlo pulsando el botón</p>
<div onmouseover="this.innerHTML += '*';" id="linea">*</div>
<br>
<button onclick="simula(event)">Simula movimiento ratón</button>
</body>
</html>
En el navegador se vería lo siguiente:
8 de 18
3. Tipos de eventos
Para cada elemento XHTML hay varios eventos que se le pueden asignar. Un
mismo tipo de evento puede aparecer asociado a varios elementos distintos.
Sintaxis:
De forma general podemos decir que el nombre de los eventos se compone del
prefijo ‘on’ seguido por el nombre de la acción (en inglés). Así por ejemplo hacer
click con el ratón, sería el evento onclick.
3.1. Eventos de ratón
Uno de los elementos más habituales de interacción del usuario con una web es el
ratón, por tanto, conocer y manejar los eventos del mismo nos puede ayudar a
mejorar el dinamismo de nuestra página. Veamos los eventos principales:
• onclick: al hacer clic con el ratón sobre un elemento.

• ondblclick: al hacer doble clic sobre un elemento.
• onmousedown: al pulsar algún botón del ratón sobre un elemento.
• onmouseenter: al entrar el puntero del ratón en el área de un elemento.
• onmouseleave: al salir el puntero del ratón del área de un elemento.
• onmousemove: al moverse el puntero del ratón en un elemento.
• onmouseover: al situar el puntero del ratón en el área de un elemento.
• onmouseout: al salir el puntero del ratón del área de un elemento o de uno
de sus hijos.
• onmouseup: al soltar un botón del ratón en un elemento.
• contextmenu: al pulsar el botón derecho del ratón.
Ejemplo:
Se escribe ‘Hola Mundo” al pulsar el botón. No tiene por qué ser con el ratón,
puede utilizarse el tabulador y enter.
<html>
<body>
<p>Ejemplo de evento onclick</p>
<button onclick="saludo()">Pulsar</button>
<script>
function saludo() {
document.getElementById("demo").innerHTML = "Hola Mundo!!";
9 de 18
3. Tipos de eventos
}
</script>
<p id="demo"></p>
</body>
</html>
Ejemplo:
Se cambia la descripción del botón, pero solamente si se pulsa con el ratón.
<html>
<body>
<p> Ejemplo de eventos onMouseDown y onMouseUp<p>
<form name=ejemplo>
<input type='button' name='boton1' value=' el ratón no
está pulsado' onmouseup="botonLibre()"
onmousedown="botonPulsado()">
</form>
<script>
function botonLibre() {
document.ejemplo.boton1.value = " El ratón no está
pulsado"
}
function botonPulsado() {
document.ejemplo.boton1.value = " El ratón está
pulsado"
}
</script>
</body>
</html>
3.2. Eventos de teclado
Si el usuario está usando el teclado para interactuar, y estamos con elementos de

formulario o body, tenemos los siguientes eventos:
• onkeydown: al mantener pulsada una tecla del teclado.

• onkeypress: al pulsar una tecla (momento de la pulsación).
• onkeyup: al soltar la tecla que estaba pulsada.
Ejemplo:
10 de 18
3. Tipos de eventos
<html>
<body>
<p>Ejemplo evento onkeypress</p>
<input type="text" onkeypress="pulsada()">
<script>
function pulsada() {
alert("Aviso: Tecla pulsada");
}
</script>
</body>
</html>
3.3. Eventos de formulario
• onfocus: al poner el foco en un elemento del formulario.

• onblur: al perder el foco en un elemento del formulario.
• onchange: al cambiar un elemento del formulario.
• onselect: al seleccionar el texto de un elemento input o textarea.
• onsubmit: al pulsar el botón de envío del formulario (antes del envío).
• onreset: al pulsar el botón reset del formulario.
Ejemplo:
<html>
<body>
<p>Ejemplo onfocus</p>
Nombre: <input type="text" onfocus="resalta(this)">
<script>
function resalta(fondo) {
fondo.style.background = "blue";
}
</script>
</body>
</html>
3.4. Eventos de ventana
• onload: al completar la carga de la ventana.

• onunload: al cerrar la ventana.
11 de 18
3. Tipos de eventos
• onresize: al cambiar el tamaño de la ventana.
Ejemplo:
<html>
<body onload="carga()">
<p>Ejemplo onload</p>
<script>
function carga() {
alert("La página se ha cargado");
}
</script>
</body>
</html>
3.5. Otros eventos
Existen otros eventos asociados a animaciones, vídeo, audio, conexión a internet,

arrastre de elementos, css, etc., que se escapan al alcance de esta nota técnica.
12 de 18
4. Manejadores
Son aquellas funciones que capturan un evento y realizan una función en

consecuencia. Estas funciones se denominan manejadores de eventos (handlers),
existen varias formas de indicar los manejadores:
• Manejadores como atributos de los elementos XHTML.

• Manejadores como funciones JavaScript externas.
• Manejadores "semánticos" asignados mediante DOM.
4.1. Manejadores como atributos
El código de la función a ejecutar tras la captura del evento se incluye en el

atributo del propio elemento XHTML en el que se produce el evento. Este código
es una cadena de texto con las instrucciones de JS a ejecutar. Y el nombre del
atributo en el que se introduce el código debe de ser el mismo nombre que el
evento a capturar.
Ejemplo
<html>
<body>
<p>Ejemplo manejador como atributo</p>
<input id="p1" type="button" value="Saludo" onclick="alert('Hola
Mundo!')" />
</body>
</html>
4.2. Manejadores como funciones externas
En este caso la llamada al código se hace llamando a una función externa.
Ejemplo:
<html>
<body>
<p>Ejemplo manejador como función externa</p>
<input type="button" value="Saludo" onclick="saludo()" />
<script>
function saludo() {
alert('Hola Mundo!');
13 de 18
4. Manejadores
}
</script>
</body>
</html>
Sólo se recomienda para códigos sencillos, para soluciones más complejas se

recomienda la tercera opción.
4.3. Manejadores semánticos
En este caso se utiliza un identificador único en el elemento XHTML (id), a partir

de este id se le asigna a una función externa encargada de manejar el evento, al
llamar a esta función se le invoca sin los paréntesis finales.
Ejemplo:
<html>
<body>
<p>Ejemplo manejador semántico</p>
<input id="p1" type="button" value="Saludo" />
<script>
document.getElementById("p1").onclick = saludo;
function saludo() {
}
</script>
</body>
</html>
4.4. This
En el manejo de eventos, la variable this apunta al elemento XHTML que ha

lanzado el evento.
Ejemplo:
<html>
<body>
14 de 18
4. Manejadores
<p>Ejemplo manejador con uso de this</p>

<input type="button" value="Saludo"
onmouseover="this.style.borderColor='blue'"
onmouseout="this.style.borderColor='silver'" onclick="saludo()"
/>
<script>
function saludo() {
this.color = "blue";
}
</script>
</body>
</html>
15 de 18
5. Eventos personalizados
Además de los eventos básicos que hemos visto en el apartado cuatro, JS provee
la posibilidad de crear nuestros propios eventos personalizados.
Para crear nuestros eventos personalizados, primero tendremos que crear nuestro
objeto Event (ver apartado 2) de forma manual mediante el constructor.
var event = new Event('Registrar');
Después sobre este evento dispondremos de varios métodos. Así podremos

asignar el evento al elemento del DOM que queramos mediante addEventListener.
elem.addEventListener('Registrar', function (e) {

console.log('registramos doble click')
}, false);
Y disparar el evento con:
elem.dispatchEvent(event);
En el ejemplo se crea un nuevo evento que cada vez que hace doble clic sobre
cualquier zona de la ventana se dispara y registra datos (en este punto podría
hacerse llamada a un servicio externo, en el ejemplo solamente se escribe en
consola).
<html>
<body>
<h2 id="mielemento">Ejemplo de evento personalizado</h2>

<p> Cualquier doble click en la ventana será registrado</p>
<script>
var event = new Event('Registrar');
elem = document.getElementById("mielemento");
// Escucha para el evento.
elem.addEventListener('Registrar', function (e) {
console.log('registramos doble click')
}, false);
// Disparar event.
window.ondblclick = function () {
elem.dispatchEvent(event);
}
</script>
</body>
</html>
16 de 18
6. Flujo de eventos
En JavaScript es posible que dos manejadores distintos respondan a un mismo

evento. Para ello se utilizan los elementos asociados a las etiquetas XHTML que
vimos, por ejemplo, en el árbol de nodos de la nota técnica de la unidad 1.11. DOM.
El orden en el que se ejecutan los manejadores es lo que se llama flujo de eventos.

(event flow), pero existen diferencias en el flujo seguido dependiendo del
navegador utilizado pudiendo llevar incluso órdenes opuestas.
Ejemplo:
<html onclick="manejaEvento()">
<body onclick=" manejaEvento()">

<p>Ejemplo de flujo de eventos</p>
<div onclick=" manejaEvento()">Pincha aqui</div>
<script>
function manejaEvento() {
console.log("Hola mundo");
}
</script>
</body>
</html>
Dependiendo del navegador utilizado, podremos disponer de distintas

instrucciones (stopPropagation navegadores W3C o cancelBuble para IE) para
evitar que se sigan ejecutando manejadores del mismo evento, lo que se llama
detener la propagación.
17 de 18

Diseño Web

Cargado por

Copyright:

Formatos disponibles

Diseño Web

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseño Web

Cargado por

Copyright:

Formatos disponibles

Documentación técnica:

2. Objeto event …………………………………..…………………………..……………………………………….….…6

2.1. Propiedades ………………………………………………………………………………………………………6

2.2. Métodos ………………………………………………………………………………………………………………7

3. Tipos de eventos ………………………………………………………………………………………………………9

3.1. Eventos de ratón ………………………………………………………………………………

3.2. Eventos de teclado ……………………………………………………………………………………10

3.3. Eventos de formulario …………………………………………………………………

3.4. Eventos de ventana ………………………………………………………………………

3.5. Otros eventos ………………………………………………………………………………… ……………12

4.1. Manejadores de atributos ……………………………………………………………

4.2. Manejadores como funciones externas ………………………………

4.3. Manejadores semánticos …………………………………………………………………………14

4.4. This …………………………………………………………………………………………………………….………14

5. Eventos personalizados ………………………………………………………………………………………16

6. Flujo de eventos ………………………………………………………………………………………………………17

Consideramos un evento, normalmente, como aquel suceso que ocurre en un

El número de eventos reconocibles con los que trabaja JS es muy extenso,

Un objeto event se crea de forma automática cuando se produce el evento, y se

• event.button: devuelve el botón del ratón pulsado (0 ningún botón, 1 botón

Algunos de los métodos más interesantes:

• event.initEvent: Inicia el valor de un evento creado vía DocumentEvent.

<p>Añadimos un * al mover el ratón sobre la linea inferior, o al

En el navegador se vería lo siguiente:

3.1. Eventos de ratón

• onclick: al hacer clic con el ratón sobre un elemento.

Se cambia la descripción del botón, pero solamente si se pulsa con el ratón.

3.2. Eventos de teclado

Si el usuario está usando el teclado para interactuar, y estamos con elementos de

• onkeydown: al mantener pulsada una tecla del teclado.

3.3. Eventos de formulario

• onfocus: al poner el foco en un elemento del formulario.

3.4. Eventos de ventana

• onload: al completar la carga de la ventana.

• onresize: al cambiar el tamaño de la ventana.

3.5. Otros eventos

Existen otros eventos asociados a animaciones, vídeo, audio, conexión a internet,

Son aquellas funciones que capturan un evento y realizan una función en

• Manejadores como atributos de los elementos XHTML.

4.1. Manejadores como atributos

El código de la función a ejecutar tras la captura del evento se incluye en el

4.2. Manejadores como funciones externas

En este caso la llamada al código se hace llamando a una función externa.

Sólo se recomienda para códigos sencillos, para soluciones más complejas se

4.3. Manejadores semánticos

En este caso se utiliza un identificador único en el elemento XHTML (id), a partir

En el manejo de eventos, la variable this apunta al elemento XHTML que ha

<p>Ejemplo manejador con uso de this</p>

var event = new Event('Registrar');

Después sobre este evento dispondremos de varios métodos. Así podremos

elem.addEventListener('Registrar', function (e) {

Y disparar el evento con:

<h2 id="mielemento">Ejemplo de evento personalizado</h2>

En JavaScript es posible que dos manejadores distintos respondan a un mismo

El orden en el que se ejecutan los manejadores es lo que se llama flujo de eventos.

<body onclick=" manejaEvento()">

Dependiendo del navegador utilizado, podremos disponer de distintas

También podría gustarte