Vinculación de manejadores a elementos en JavaScript
Ahora aprendamos a hacer que nuestros elementos DOM reaccionen a las acciones del usuario del sitio. Por ejemplo, el usuario hace clic en algún lugar con el ratón, y nuestro código en respuesta debe procesar este clic y mostrar alguna información en la pantalla.
Las acciones del usuario que podemos rastrear a través de JavaScript se llaman eventos. Los eventos pueden ser los siguientes: clic del ratón en un elemento de la página, pasar el ratón sobre un elemento de la página o viceversa - la salida del cursor del ratón del elemento y así sucesivamente. Además, hay eventos que no dependen de las acciones del usuario, por ejemplo, el evento de carga de la página HTML en el navegador.
Como ejemplo, hagamos un botón que al ser presionado muestre algún texto en la pantalla. Primero hagamos el código HTML del botón:
<input id="button" type="submit">
Ahora obtengamos una referencia al botón en una variable:
let button = document.querySelector('#button');
Ahora necesitamos definir la reacción de nuestro
botón al hacer clic en él. Para esto en JavaScript
existe un método especial addEventListener,
que toma como primer parámetro el nombre del evento
(el clic en el botón tiene el nombre 'click'),
y como segundo parámetro - una función de callback,
que se ejecuta cuando ocurre ese evento.
Por ejemplo, al hacer clic en el botón mostremos algún texto:
button.addEventListener('click', function() {
console.log('!!!');
});
Se dan 3 botones:
<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">
Haga que al hacer clic en el primer botón
se muestre el número 1 en la pantalla,
al hacer clic en el segundo - el número 2,
y al hacer clic en el tercero - el número 3.
