Formas de usar eventos web

Existen varias formas de utilizar los event listener en las paginas web, para que se ejecute el evento asociado o event handler.

Propiedades del controlador de eventos

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

btn.onclick = function() {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

Tambien se podria hacer que que la propiedad del controlador sea igual a una funcion con nombre ⇒

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

function bgChange() {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

btn.onclick = bgChange;

Controladores de eventos en linea: no los use

Se puede encontrar codigo en HTML como este ⇒

<button onclick="bgChange()">Press me</button> //donde se llama al evento dentro del elemento

El primer metodo para registar controladores de evento en la web involucro atributos HTML de controlador de eventos o (controladores de eventos en linea), como el de arriba 👆. El valor del atributo es el codigo JS que se desea ejecutar, ya sea el nombre de la funcion o una linea de codigo ⇒

<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
//ahi esta la linea de codigo, en este caso un alert

Entre las ventajas de utilizar el codigo JS separado del HTML ⇒

Ejemplo practico ⇒

const buttons = document.querySelectorAll('button');

for (let i = 0; i < buttons.length; i++) {
  buttons[i].onclick = bgChange;
}

Otra manera de realizar este codigo seria utilizando el metodo integrado para los objetct NodeList ⇒ forEach()

const buttons = document.querySelectorAll('button');

buttons.forEach(function(button) {
  button.onclick = bgChange;
});

Agregar y quitar controladores de eventos.

El mecanismo moderno para agregar controladores de evento es el addEventListener() metodo. Donde el evento de cambio de color del background seria asi ⇒

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

function bgChange() {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', bgChange);

btn.addEventListener('click', function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
});

Este nuevo mecanismo para incorporar eventos tiene ventajas respecto al anterior, una de ellas es la posibilidad de eliminar el evento antes asignado al elemento con removeEventLister() ⇒

btn.removeEventListener('click', bgChange);

Otra forma de eliminar un evento es pasando un AbortSignal🔗 al addEventListener() y luego llamando al metodo abort() al controlador que posee el AbortSignal. Ejemplo ⇒

const controller = new AbortController(); //prototipo de AbortController
btn.addEventListener('click', function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}, { signal: controller.signal }); //tercer parametro asignando el AbortSignal a este controlador

Luego se podria eliminar el controlador de eventos ⇒

controller.abort(); // removes any/all event handlers associated with this controller

Esto es especialmente util para eliminar controladores antiguos que ya no se desen utilizar, o para tener un mejor control sobre los eventos de los elementos, segun la situacion lo requiera, donde en unas situaciones podremos agregar o quitar eventos de ciertos elementos, dando asi mas versatilidad y control de la funcionalidad del programa.

Una segunda gran ventaja que tiene este mecanimos de controlador de eventos es que permite agregar multiples manejadores (varias funciones para el mismo tipo de evento) al mismo oyente (elemento). En el mecanimos antiguo el siguiente codigo seria una imposibilidad ⇒

myElement.onclick = functionA;
myElement.onclick = functionB;

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);