Introducción a los eventos javascript

Introducción a los eventos javascript

Print Friendly, PDF & Email
Introducción a los eventos javascript
Valora esta entrada
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

Entradas relacionadas:

Ejercicio – ¿En qué día de la semana estamos?
- 65
Problema javascript que devuelve en formato texto el día de la semana en el que esamos. Incluye 2 posibles soluciones con switch() y array.
Validación de campos try catch finally en Javascript puro
- 335
Explicación teórica y ejemplo práctico del uso de las instrucciones try + throw, catch y finally en javascript. Utilizamos esta estructura para validar un campo en un formulario. Sin embargo se puede ...
Como añadir nuevos nodos al DOM usando Javascript
- 346
En esta entrada vemos un tutorial paso a paso sobre como añadir nuevos nodos al DOM mediante Javacript con el ejemplo de un párrafo y el de una imagen.
Ejercicio – Acoplamiento de javascript en un documento web
- 139
Ejercicio y solución de un problema introductorio al mundo del Javascript.
Como llamar nodos del DOM mediante javascript
- 378
Repasamos los distintos métodos directos e indirectos y estrategias para acceder e identificar los nodos del DOM de modo inequívoco.
Ejercicio – Escribir un texto almacenado en una variable
- 61
Este es un simple ejercicio cuyo objetivo es únicamente coger un poco de soltura usando expresiones típicas en javascript.
Introducción a la lógica de programación: if y for
- 530
Hasta el momento hemos estado programando mediante secuencias de instrucciones que se iban sucediendo en orden cronológico. Hemos aprendido la sintaxis y vocabulario mínimo necesario del lenguaje java...
Ejercicio – Crear una lista de recordatorios
- 57
Ejercicio javascript solucionado para crear una lista de recordatorios y que es capaz de resetear todos los nodos. Apuntes de clase.
Funciones Javascript: declaración, uso y utilidad en programación
- 452
Una función es una estructura de código que ejecuta y transforma unos inputs de entrada en un output de salida en forma de dato o acción. Hemos trabajado con funciones toda nuestra vida. Las aprendimo...
Ejercicio JS – Crear un cronómetro con javascript
- 35
Completo cronómetro JS dónde se usa setInterval, addEventListener, removeEventListener y se repasan conceptos de CSS. Incluye solución.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.