Mientras usas tu navegador, este registra distintos tipos de eventos: por ejemplo cuando el usuario hace clic en un botón, envía un formulario o pasa el ratón por encima de un elemento. Es la manera que tiene el navegador de decirte que el usuario acaba de realizar una acción. Tu script puede entonces responder a esos eventos. Los scripts suelen responder actualizando el contenido de la página web a través del objeto document, lo que la vuelve más interactiva. En este capítulo voy a listarte los distintos tipos de evento con los que puedes trabajar para hacer tus páginas un poco más interactivas.
Este artículo no está completo y puede recibir actualizaciones
Asignar una función a un evento
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world');
}
bouton.onclick = MonAlert;Todos los navegadores modernos entienden esta forma de asignar una función a un evento, pero solo puedes asociar una función a cada evento y no puedes pasarle parámetros. De hecho, estamos obligados a quitar los paréntesis para que el código no se dispare de inmediato.
Inconveniente
Cuando quieres asignar varias funciones a un mismo evento, la nueva sobrescribe a la anterior.
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world!');
}
function AlertTOTO() {
alert('Toto!')
}
bouton.onclick = MonAlert;
bouton.onclick = AlertTOTO;Resultado: obtenemos el mensaje Toto!.
Event Listener
Los event listeners son un método más moderno que permite asignar varias funciones a la vez a un mismo evento.
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world!');
}
function AlertTOTO() {
alert('Toto!');
}
bouton.addEventListener('click', MonAlert);
bouton.addEventListener('click', AlertTOTO);El método addEventlistener() recibe tres parámetros:
element.addEventlistener('evenement', NomDeFonction, Boolean);
- evenement: el nombre del evento que quieres escuchar ( blur, click, … );
- El código que quieras: puede ser una función que hayas declarado o bien una función anónima.
- Un
booleanque indica la propagación de los eventos, por defecto vale false.
Inconveniente
Este método no está soportado en los navegadores antiguos.
Usar parámetros
Ya hemos visto que no podemos poner paréntesis en nuestras funciones cuando queremos asignarlas a un evento. Para conseguirlo, creamos una función anónima que asignamos al evento y, dentro de ella, llamamos a nuestras funciones con sus parámetros.
function MonAlert(message) {
alert(message);
}
bouton.addEventListener('click', function() {
MonAlert('Mon message qui s'affiche!');
});El objeto Event
Cuando se produce un evento, existe un objeto de evento que contiene información sobre el evento y sobre el elemento en el que se ha producido.
var bouton = document.getElementById('click');
function MonAlert(e) {
console.log(e.target);
}
bouton.onclick = MonAlert;Con event listener y parámetros
var bouton = document.getElementById('click');
function MonAlert(e, message) {
console.log(e.target);
console.log(message);
}
bouton.addEventListener('click', function(e){
MonAlert(e, "hello world!");
});Propiedad
| Propiedad | Descripción |
|---|---|
target | El elemento que ha disparado el evento |
type | El evento que se ha disparado |
Método
| Método | Descripción |
|---|---|
preventDefault() | Cancela el comportamiento por defecto de un evento (si se puede cancelar) |
stopPropagation() | Detiene la propagación del evento. |
Lista de eventos
Aquí tienes una pequeña lista, no exhaustiva, de los eventos que se encuentran con más frecuencia.
Navegador
| Evento | Descripción |
|---|---|
load | Se dispara cuando el navegador ha terminado de cargar. También puede dispararse en nodos de otros elementos cargados, como imágenes, scripts u objetos. |
unload | es lo contrario del evento load: se dispara cuando se cambia de página. |
resize | se dispara cuando el usuario cambia el tamaño de la ventana de su navegador. |
scroll | se dispara cuando el usuario hace scroll en la página o en un elemento. |
error | error se dispara cuando el navegador encuentra un error de JavaScript. |
Ratón
| Evento | Descripción |
|---|---|
click | Se dispara cuando el usuario hace clic en un elemento |
dblclick | Igual que click, pero cuando el usuario hace un doble clic rápido. |
mouseup | Se dispara cuando el usuario mantiene pulsado un botón del ratón. |
mousedown | Se dispara cuando el usuario suelta un botón del ratón. |
mousemove | Se dispara cuando el cursor se desplaza. |
mouseover | se dispara cuando el cursor pasa por encima de un elemento. |
mouseout | se dispara cuando el cursor sale de un elemento sobre el que estaba pasando, o bien entra en un elemento hijo de este. |
Teclado
| Evento | Descripción |
|---|---|
input | Se dispara cuando cambia el valor de un elemento <input> o <textarea>. |
keydown | Se dispara cuando el usuario pulsa una tecla del teclado. Si el usuario mantiene la tecla pulsada, el evento se sigue disparando de forma repetida. |
keypress | Se dispara cuando el usuario pulsa una tecla que provocaría la aparición de un carácter en pantalla. Por ejemplo, este evento no se dispararía al pulsar las teclas de flecha, mientras que el evento keydown sí lo haría. Si el usuario mantiene la tecla pulsada, el evento se sigue disparando de forma repetida, igual que keydown. |
keyup | Se dispara cuando el usuario suelta una tecla del teclado. Los eventos keydown y keypress se disparan antes de que el carácter aparezca en pantalla, mientras que keyup se dispara después de su aparición. |
Saber qué tecla se ha pulsado
Con el objeto Event puedes saber qué tecla se ha pulsado usando e.keycode, que devuelve el código ASCII de la tecla del teclado.
Formulario
| Evento | Descripción |
|---|---|
submit | Se dispara cuando el usuario pulsa el botón de validación del formulario. |
change | Se dispara cuando cambia el estado de varios elementos de formulario. ( radio, checkbox y select ) |
