Introducción a los eventos javascript

Introducción a los eventos javascript

Print Friendly, PDF & Email
Introducción a los eventos javascript
5 (100%) 1 voto[s]

Hoy vamos a hablar de los eventos Javascript.

El navegador web está continuamente alerta a que suceda algún tipo de activador que desencadene una instrucción. Es lo que se conoce como un evento.

Los eventos pueden ser la consecuencia de una acción de algún tipo de periférico del ordenador como el ratón o teclado, por el comportamiento del usuario por, acciones que pueda realizar el usuario a voluntad o simplemente por circunstancias ligadas a la carga de una página web.

Por ejemplo que se haya cargado todo el documento web es un evento en si.

Glosario de eventos básicos a memorizar

onclick, se activa con el click del ratón sobre un elemento.

onchange, se activa cuando un elemento es modificado.

onmouseover, se activa cuando el ratón sale por encima.

onmouseout, se activa cuando el ratón se desplaza de dentro hacia fuera de un elemento.

onkeyup, se activa cuando el usuario suelta la tecla.

onload, uno de mis favoritos. Se activa tras haberse cargado todo el documento web.

onsubmit, importantísimo. Evento que activa el envío de un formulario.

Acoplamiento de eventos

De modo similar que con el css los eventos se acoblan en el documento. Como atributo y como evento semántico.

Como javascript en línea en un atributo de una etiqueta html

Por ejemplo:

<button onclick = “window.alert(‘hola que tal’)>Envía un saludo</button>

Fijaros en el ejemplo que el string se ha pasado con comillas simples pues el atributo del html lo hemos puesto con comillas dobles.

Como una función en un atributo de una etiqueta html

Por ejemplo:

<button onclick = “saludar()>Envía un saludo</button>

Dónde saludar() sería definida en la hoja javascript como una función.

Es importante asegurarnos que el javascript del documento web se haya cargado antes de que se active el evento.

La función externa se presta al uso de una instrucción muy útil en programación que es la palabra reservada this.

Hablaré de this en un capítulo posterior. Pero para resumirlo this viene a pasar como parámetro el elemento que ha sido activado.

Modificando el DOM al cargar el documento. setAttribute() o como evento-atributo html

Los eventos semánticos nos ayudan a desvincular el máximo posible el javascript de la hoja html.

A diferencia de las 2 opciones anteriores, evitamos declarar un evento como un atributo directamente en el html y en su lugar lo hacemos desde el propio javascript dentro de la etiqueta <script> o una hoja externa llamada desde <script src=»»>

Conozco 3 formas de hacerlo (es posible que hayan más):

Ejemplo 1:

document.getElementById(«boton»).setAttribute(«onclick»,»saludar()»);

Ejemplo 2:

document.getElementById(“boton”).onclick = saludar;

En el ejemplo 2 fijaros en la ausencia del paréntesis.

Según comentado en la publicación de setInterval() no queremos la ejecución inmediata del evento cuando se lea. En su lugar lo que deseamos es que se asigne el contenido de la función. Es decir, estamos tratando la función como una variable.

Siguiendo con el ejemplo 2 es conveniente asignar a los nodos del documento web cuantos eventos necesitamos asignarles justo después del momento del momento de carga.

De lo contrario corremos el riesgo de que un elemento vea truncada su funcionalidad.

Ejemplo 2 reescrito:

window.onload = init;

function init(){

document.getElementById(“boton”).onclick = saludar;

};

Observación:

Podríamos escribir el ejemplo 3 de la siguiente forma.

window.onloadfunction (){

document.getElementById(“boton”).onclick = saludar;

}

Modificando el DOM al cargar el documento. addEventListener()

La instrucción addEventListener(nombreEvento,nombreFuncion) nos permiten añadir eventos a los nodos de un documento web.

Presentan la ventaja que no sobre escriben eventos que ya pudieran existir de antemano.

Este método es especialmente recomendado cuando desconocemos aquello que otro programador pudiera haber escrito antes que nosotros.

Ejemplo 1:

document.getElementById(«boton»).addEventLister(«click»,»saludar»);

Fijaros que en todos los eventos desaparece el prefijo on.

De este modo:

onclick, pasamos a escribir click

onchange, pasamos a escribir change

onmouseover, pasamos a escribir mouseover

onmouseout, se activa cuando el ratón se desplaza de dentro hacia fuera de un elemento.

onload, pasamos a escribir load

Diferencias entre metodologías para acoplar eventos

Cuando asociamos un evento como un atributo html:

  • Es un sistema compatible con todos las versiones de explorer
  • Sobre escribimos posibles eventos que pudiese haber asignados previamente

Cuando asociamos un evento mediate addEventListener()

  • No es compatible para versiones anteriores a explorer 8
  • Podemos añadir tantos eventos iguales como queramos asociados a un mismo nodo.

Y hasta aquí una entrada extensa en la que hemos repasado muchos conceptos importantes del DOM pero que a la vez ha sido bastante resumida.

Espero que os pueda ser de utilidad.

¡Hasta mañana!

Imagen de portada a partir de Kari Shea en Unsplash

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.