Skip to content

Latest commit

 

History

History
42 lines (31 loc) · 2.35 KB

06-agregar-eventos-a-elementos.md

File metadata and controls

42 lines (31 loc) · 2.35 KB
Raw

Agregar eventos a elementos en JavaScript

Para agregar eventos a los elementos del DOM en JavaScript, puedes utilizar el método addEventListener. Este método te permite adjuntar un controlador de eventos a un elemento específico y especificar qué código se ejecutará cuando ocurra ese evento en particular.

A continuación, te muestro un ejemplo de cómo agregar eventos a los elementos del DOM utilizando addEventListener:

<!DOCTYPE html>
<html>
<head>
  <title>Agregar eventos a elementos en JavaScript</title>
</head>
<body>
  <button id="myButton">Haz clic aquí</button>

  <script>
    // Obtener una referencia al elemento del botón
    const button = document.getElementById('myButton');

    // Agregar un controlador de eventos al botón
    button.addEventListener('click', function() {
      // Lógica a ejecutar cuando se hace clic en el botón
      console.log('Se hizo clic en el botón');
    });
  </script>
</body>
</html>

En este ejemplo, utilizamos JavaScript dentro de la etiqueta <script> para agregar un evento click al botón. Aquí está el flujo de trabajo:

  1. Utilizamos getElementById para obtener una referencia al elemento del botón.
  2. Utilizamos addEventListener para adjuntar un controlador de eventos al botón y especificamos el tipo de evento (click) y la función que se ejecutará cuando ocurra el evento.
  3. Dentro de la función del controlador de eventos, escribimos el código que deseamos que se ejecute cuando el evento ocurra. En este caso, simplemente mostramos un mensaje en la consola.

Al ejecutar este código y hacer clic en el botón, verás que se muestra el mensaje "Se hizo clic en el botón" en la consola.

Puedes agregar múltiples eventos a un elemento, simplemente llamando a addEventListener con diferentes tipos de eventos y funciones de controladores.

Recuerda que el método addEventListener también te permite adjuntar eventos a otros elementos del DOM, como campos de entrada, enlaces, elementos de lista, etc. Simplemente necesitas obtener una referencia al elemento deseado y llamar a addEventListener para agregar el evento correspondiente.

Además, puedes utilizar funciones anónimas como en el ejemplo anterior o también puedes utilizar funciones definidas por separado para tus controladores de eventos, lo que puede facilitar el mantenimiento y la reutilización de código.