Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript

Una introducción a los oyentes de eventos de JavaScript para los diseñadores web

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Si eres un diseñador web que aún no ha entrado en el mundo de JavaScript, o si recién estás comenzando en el desarrollo front-end, este tutorial es la manera perfecta de comenzar. Este explicará, de forma muy sencilla, un par de conceptos realmente útiles que podrás usar de inmediato y te sacarán de las obstrucciones iniciales de JavaScript.

¿Qué son los oyentes de eventos?

Los oyentes de eventos se encuentran entre las estructuras de JavaScript que se usan más frecuentemente en el diseño web. Estas nos permiten añadir funcionalidad interactiva a los elementos HTML "oyendo" diferentes eventos que tienen lugar en la página, como cuando el usuario hace clic en un botón, cuando presiona una tecla o cuando se carga un elemento.

Cuando ocurre un evento, podemos ejecutar algo.

Los eventos más comunes que podrías "estar oyendo" son load, click, touchstart, mouseover, keydown. Puedes consultar todos los eventos DOM en la guía "Referencia de eventos" de MDN.

Siguiendo esta guía aprenderás cómo crear un oyente de eventos de JavaScript de tres maneras diferentes:

  • Atributos globales onevent de HTML
  • Métodos de eventos de jQuery
  • El método addEventListener() de la API de DOM

Finalmente, veremos cómo crear una funcionalidad básica para revelar y ocultar usando un oyente de eventos clic.

1. Cómo usar los atributos globales onevent en HTML

Si solamente quieres agregar un script de una sola línea a un elemento HTML en particular, puedes usar los atributos onevent globales de HTML definidos por la especificación de HTML, por ejemplo onclick, onload y onmouseover.

Estos atributos pueden añadirse directamente a cualquier elemento HTML que esté presente en la página; sin embargo, su compatibilidad con los navegadores varía ampliamente. Por ejemplo, onclick es compatible con todos los navegadores modernos desde IE9, mientras que el soporte para otros atributos onevent como ondrag es más irregular. Puedes consultar la compatibilidad con navegadores de los atributos globales onevent escribiendo "globaleventhandlers" en el cuadro de búsqueda en CanIUse.

La sintaxis de los atributos onevent es simple, y ya que son atributos globales, puedes usarlos en cualquier elemento, por ejemplo:

Aquí, el oyente de eventos onclick escucha el evento clic en un botón específico. Cuando el evento se activa (cuando el usuario hace clic en este botón), se ejecuta la función de devolución de llamada alert().

Si queremos agregar la misma funcionalidad de alerta a cada botón de la página, debemos agregar el oyente del evento clic en un script separado en lugar de usar el atributo onclick.

2. Cómo crear un oyente de eventos en jQuery

jQuery tiene varios métodos de eventos que escuchan diferentes tipos de eventos, tales como .click(), .hover(), .mouseover(), .ready(), .load() y otros. Por ejemplo, así es como se verá el oyente de eventos anterior en jQuery:

Este oyente de eventos agrega el mensaje de alerta 'Hi jQuery' ('Hola jQuery') a todos los elementos <button> de la página. Para enfocarnos solamente en un botón específico, debemos agregarle un id único y usar ese id con el método de eventos click(), por ejemplo:

Ya que los métodos de eventos de jQuery se enfocan en los mismos eventos de la interfaz de usuario que los atributos globales onevent de HTML, hay muchas superposiciones entre ambos. Sin embargo, ya que jQuery también es una biblioteca que se ejecuta sobre JavaScript nativo, este cuenta con algunos métodos de eventos, tales como .hover(), que no están incluidos en la API de DOM, por lo que no podemos escucharlos ni con los atributos onevent ni con el método addEventListener() nativo.

El método .on()

Los oyentes de eventos de jQuery tienen otra ventaja con respecto a las otras dos técnicas: el método .on(). Este nos permite vincular más de un evento a la misma función de devolución de llamada. Por ejemplo, podemos agregar la misma funcionalidad de alerta tanto al evento click como al evento mouseover al mismo tiempo:

3. Cómo crear un oyente de eventos en JavaScript

Mediante el uso de JavaScript nativo, podemos escuchar todos los eventos definidos en la "Referencia de eventos" de MDN, incluyendo los eventos táctiles. Ya que esto no requiere el uso de una biblioteca de terceros, se trata de la mejor solución en cuanto a rendimiento para agregar funcionalidad interactiva a los elementos HTML.

Podemos crear un oyente de eventos en JavaScript usando el método addEventListener() que viene integrado en todos los navegadores modernos.

Así es como ser verá nuestro ejemplo del botón de alerta usando JavaScript puro y el método addEventListener():

Aquí está en acción:

En JavaScript nativo, primero necesitamos seleccionar el elemento DOM al que queramos agregar el oyente de eventos. El método querySelector() selecciona el primer elemento que coincida con un selector especificado. Entonces, en nuestro ejemplo, este selecciona el primer elemento <button> de la página.

La función personalizada alertButton() es la función de devolución de llamada que será invocada cuando el usuario haga clic en el botón.

Finalmente, agregamos el oyente de eventos. Siempre tenemos que vincular el método addEventListener() a un elemento DOM preseleccionado usando la notación de puntos. En los parámetros, primero definimos el evento que queramos escuchar ("click"), luego el nombre de la función de devolución de llamada (alertButton), finalmente el valor del parámetro useCapture (usamos el valor predeterminado false, ya que no queremos capturar el evento: aquí hay una explicación simple sobre cómo usar useCapture).

Cómo agregar funcionalidad a todos los botones

Entonces, el código anterior agrega la función de alerta al primer botón de la página. Pero, ¿cómo agregaríamos la misma funcionalidad a todos los botones? Para hacer eso, necesitamos usar el método querySelectorAll(), recorrer los elementos con un bucle y agregar un oyente de eventos a cada botón:

Ya que querySelectorAll() devuelve una NodeList en vez de un solo elemento, necesitamos recorrer los nodos con un bucle para agregar un oyente de eventos clic a cada botón. Por ejemplo, si tenemos tres botones en la página, el código anterior creará tres oyentes de eventos clic.

Ten en cuenta que solo puedes escuchar un evento con addEventListener(). Así que si quieres que la función personalizada alertButton() se active en otro tipo de evento, por ejemplo mouseover, necesitarás crear una segunda regla con un oyente de eventos:

4. Cómo combinar oyentes de eventos con CSS y sentencias condicionales

Probablemente lo mejor de los oyentes de eventos es que podemos combinarlos con CSS y con sentencias condicionales if-else. De esta forma, podemos enfocarnos en los diferentes estados de un mismo elemento con CSS y/o JavaScript.

Por ejemplo, aquí hay un caso muy simple; una funcionalidad para revelar y ocultar. El HTML solo consta de un botón y una sección. Vincularemos la sección al botón usando un oyente de eventos de JavaScript. El botón será el responsable de revelar y ocultar la sección que esté debajo de él:

En el JavaScript, primero creamos dos constantes (revealButton y hiddenSection) para los dos elementos HTML usando el método querySelector().

Después, en la función de devolución de llamada revealSection(), verificamos si la sección oculta tiene la clase reveal o no usando la propiedad classList definida en la API de DOM. Si la sección oculta tiene esta clase, la eliminamos usando el método remove() de la API de DOM, y si no la tiene, la agregamos usando el método add() de la API de DOM. Finalmente, creamos un oyente de eventos para el evento clic.

Ahora JavaScript agrega o elimina la clase .reveal dependiendo del estado actual de la sección oculta. Sin embargo, aún tenemos que ocultar o revelar visualmente el elemento usando CSS:

¡Y eso es todo! Cuando el usuario hace clic en el botón por primera vez, la sección oculta es revelada, y cuando hace clic en él por segunda vez, se oculta nuevamente. Puedes probar la funcionalidad en el demo de Codepen a continuación:

Esta funcionalidad básica para revelar y ocultar puede ser usada para muchas cosas diferentes, por ejemplo para ocultar y mostrar un menú en pantallas pequeñas, para crear secciones con pestañas, mostrar mensajes de error, y más.

¡Ahora comprendes los oyentes de eventos de JavaScript!

En esta guía analizamos los eventos iniciados por los usuarios (click y mouseover), y cómo puedes crear oyentes de eventos para ellos.

Para encontrar el tipo de evento adecuado se requiere hacer pruebas sólidas, ya que hay eventos que son similares entre sí pero no iguales, como en el caso de keydown y keypress. Además, si hay más de un oyente de eventos en una página, estos pueden interactuar entre ellos también.

Ten en cuenta que siempre debes probar cómo funcionan tus oyentes de eventos en dispositivos diferentes (esto es especialmente importante para los eventos táctiles). Finalmente, cada oyente de eventos debe estar vinculado al elemento que tenga más sentido, ya que, idealmente, no deberían haber oyentes de eventos innecesarios en tu código.

¡Sigue adelante y construye!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.