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:

Eliminar eventos Javascript .removeEventListener()
- 1164
Ejemplos prácticos de como usar addEventListener() y removeEventListener() del tutorial gratuito de Javascript (y apuntes para mis alumnos)
Instrucciones básicas para familiarizarse con javascript
- 605
El javascript es un lenguaje que se olvida a una velocidad de vértigo si no se practica. Es importante tener unos buenos apuntes 😉 Hoy presento instrucciones básicas que sirven para empezar con scrip...
Ejercicio JS – Ventana emergente control de edad
- 111
Ejercicio javascript que regula el control de accesos a una página web según edad del visitante. Incluye solución.
¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 362
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Como contar vocales y espacios en blanco en un texto mediante javascript
- 219
Ejercicio con solución dónde se muestra como hacer un script que cuenta todas las vocales y espacios en blanco de un texto introducido por el usario.
Ejercicio – Crear una lista de recordatorios
- 144
Ejercicio javascript solucionado para crear una lista de recordatorios y que es capaz de resetear todos los nodos. Apuntes de clase.
Ejercicio JS – Como cargar una imagen aleatoria al clicar un botón
- 169
Ejercicio javascript resuelto en el que see plantea un script para cargar una imagen aleatoria cada vez que se clica un botón.
Javascript: Estructura básica de un script
- 1207
¿Qué es programar? Programar es indicar a una máquina que siga un conjunto ordenado de instrucciones. Es una acción cotidiana que realizamos sin apercibirnos cuando seguimos una receta de cocina. Y si...
Palabras reservadas que no se deben usar para declarar variables
- 262
Listado de palabras reservadas en Javascript de acuerdo con el último stándard ECMA Script 6.
Ejercicio – Corregir errores de sintaxis en funciones
- 163
Ejercicio javascript dónde se repasa la sintaxi de funciones. Corrige los errores.
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.