Cuando registramos un eventos tenemos múltiples opciones gestionar ese registro. Por ejemplo hemos visto cómo podemos abortar la ejecución de un evento enviando una señal. En este caso vamos a ver cómo podemos ejecutar un evento una única vez.

La idea es sencilla, lo que haremos será registrar un evento, por ejemplo el click sobre un botón y vamos a configurar para que cuando volvamos a pulsarlo el evento ya no esté disponible, ya que solo se ejecutará una vez.

En el ejemplo lo que vamos a hacer es poner 3 botones y registrar el mismo evento. De esta forma solo dejaremos que se pulse en uno de los botones y sabremos cual es el que se ha pulsado. A modo de opciones para el usuario.

Así que manos a la obra. Lo primero será poner los botones en nuestra página mediante un elemento button.

<button id="uno">Uno</button>
<button id="dos">Dos</button>
<button id="tres">Tres</button>

Ahora vamos a registrar el evento que asociaremos a los tres botones. Para ello crearemos un objeto que tenga un método .handleEvent().

const controlador = {
  handleEvent: function(ev) {
    elegido.value = ev.target.id;
  }
}

El método .handleEvent() recibe la información del evento, es por ello que en el atributo Event.target podremos acceder al objeto que inicio el lanzamiento del evento y podremos recuperar, como podemos ver el código, el identificador del elemento mediante su atributo id.

Con el controlador diseñado lo que haremos, mediante el método .addEventListener() es asociar dicho controlador a los tres botones.

const b1 = document.getElementById("uno");
const b2 = document.getElementById("dos");
const b3 = document.getElementById("tres");

const controlador = {
    handleEvent: function(ev) {
        elegido.value = ev.target.id;
    }
}

b1.addEventListener("click",controlador);
b2.addEventListener("click",controlador);
b3.addEventListener("click",controlador);

Lo siguiente será hacer que solo pueda lanzar una vez el evento. Para ello podríamos gestionar una señal que eliminase el lanzamiento del evento, pero hay una forma más sencilla y es que si miramos la sintaxis del método .addEventListener() vemos que hay una propiedad de opciones que nos permite gestionar que el evento solo se lance una única vez.

Esta propiedad es el valor once, lo cual podemos pasar como opciones dentro del método .addEventListener().

addEventListener(type, listener, options)

Simplemente tendremos que asociar el valor de true a dicha opción once. De esta manera nuestros gestores de eventos quedaría con el método .addEventListener() de la siguiente manera:

b1.addEventListener("click",controlador, { once: true });
b2.addEventListener("click",controlador, { once: true });
b3.addEventListener("click",controlador, { once: true });

Así ya tendremos nuestro código fuente para que tengamos el control para ejecutar un evento una única vez. ¿Te has dado cuenta que con el código sabremos qué botón fue pulsado?

Seguro que si has manejado eventos dentro de una página web mediante un método .addEventListener() te has preguntado cómo puedes pasar datos a un listener. Es decir, que registrar un evento es sencillo y acceder al objeto que lo ha lanzado es fácil si accedemos a la propiedad Event.target. Pero, qué hacer si queremos pasarle más información del contexto.

Lo que vamos a realizar en este código es el crear un botón, que al pulsarlo, nos emita un saludo en algún campo de la página web. Pero este saludo tendrá un nombre el cual pasaremos como dato adicional a nuestro gestor de eventos.

Lo primero, como no, crear nuestro botón para el saludo mediante el elemento button y un área de texto para poner el saludo que conseguiremos mediante un elemento span.

<button id="saludar">Saludar</button>
<span id="mensaje"></span>

Recuerda siempre utilizar el atributo id de los elementos HTML para poder acceder de forma sencilla en nuestro código Javascript mediante el método .getElementById()

Ahora pasamos a registrar el evento click mediante el método .addEventListener(). Lo que hacemos el utilizar la propiedad innerHTML para poder volcar un texto sobre el elemento span.

const boton = document.getElementById("saludar");
const mensaje = document.getElementById("mensaje");

boton.addEventListener("click", function () {
    mensaje.innerHTML = "Hola";
});

El siguiente paso será definir una variable que contendrá el valor externo el cual queremos pasar a nuestro método .addEventListener(). Para conseguir pasarle esta variable externa recurrimos al método .bind() que llevan asociado todas las funciones.

La idea del método .bind() es que el valor que pasemos como primer parámetro será el valor de this dentro de la función. Así que pasaremos la variable como parámetro del método .bind()

let nombre = "Víctor";
const boton = document.getElementById("saludar");
const mensaje = document.getElementById("mensaje");

boton.addEventListener("click", function () {...}.bind(nombre)
);

En este caso solo hemos pasado un primer parámetro que funciona como valor this dentro de la función. Si bien, al método .bind() le podemos pasar más parámetros, como podemos consultar en la explicación de su sintaxis.

Ahora lo que tenemos que hacer es utilizar es el valor this dentro del método .addEventListener() para poder componer el mensaje de saludo.

let nombre = "Víctor";
const boton = document.getElementById("saludar");
const mensaje = document.getElementById("mensaje");

boton.addEventListener("click", function () {
    console.log(this);
    mensaje.innerHTML = "Hola " + this;
}.bind(nombre)
);

Con todo esto ya habremos conseguido pasar datos a un listener mediante el método .bind() a nuestro registro de eventos definido en el .addEventListener().