Eventos ​

MDN Eventos

Los eventos son acciones que ocurren en el navegador, como hacer click en un botón, escribir en un input, mover el ratón, etc. El navegador puede vigilar estos eventos y ejecutar código cuando estos ocurren.

Eventos en HTML ​

Podemos utilizar eventos de diferentes formas, la más común al empezar es utilizando el evento on seguido de su accion en el elemento HTML al que queremos asignar un evento, onclick, oninput, onchange son ejemplos de eventos que el navegador puede vigilar. Cuando estos eventos tienen lugar, se ejecutará el código que hayamos asignado a la propiedad on del elemento HTML.

<button onclick="alert('Hola mundo!')">Click me!</button>
<button onclick="mi_funcion()">Click me!</button>

<button onclick="alert('Hola mundo!')">Click me!</button>
<button onclick="mi_funcion()">Click me!</button>

Event Listeners ​

Muchas veces necesitaremos asignar un evento a un elemento desde JavaScript, para ello podemos utilizar el método addEventListener del elemento HTML al que queremos asignar un evento. Este método recibe dos parámetros, el primero es el nombre del evento y el segundo es la función que queremos que se ejecute cuando el evento tenga lugar.

Esto es lo que se conoce como callback, una función que se ejecuta cuando ocurre un evento.

const boton = document.querySelector('button');

boton.addEventListener('click', function() {
  alert('Hola mundo!');
});

const boton = document.querySelector('button');

boton.addEventListener('click', function() {
  alert('Hola mundo!');
});

Event Handler ​

Por último, podemos asignar un evento a un elemento desde JavaScript utilizando el atributo on directamente en el elemento:

const boton = document.querySelector('button');

boton.onclick = function() {
  alert('Hola mundo!');
};

const boton = document.querySelector('button');

boton.onclick = function() {
  alert('Hola mundo!');
};

Solo podemos asignar un evento a un elemento utilizando el atributo on, si asignamos otro evento se sobreescribirá el anterior, este comportamiento no ocurre con addEventListener.