En la siguiente captura de pantalla, ¿alguien puede explicar por qué tiene que pasar la función "una vez" a button.removeEventListener ("clic", una vez)? ¿Lo pasamos simplemente porque el método removeEventListener requiere dos argumentos? Además, parece extraño que "Listo" no esté registrado en la consola más de una vez, dado que la función "una vez" también se pasa al método removeEventListener.

enter image description here

let button = document.getElementById("button");

function once() {
  console.log("Done");
  button.removeEventListener("click", once);
}
button.addEventListener("click", once);
<button id="button">once</button>
0
user8888 28 oct. 2017 a las 12:43

3 respuestas

La mejor respuesta

Cuando desee desvincular solo un controlador específico (como aquí está desvinculando el controlador once), debe pasarlo como el segundo parámetro, de lo contrario, JS no sabría qué controlador eliminar.

Puede haber múltiples controladores vinculados a cada evento.

Además, parece extraño que "Listo" no esté registrado en la consola más de una vez, dado que la función "una vez" también se pasa al método removeEventListener.

Esa es la razón por la que se llama solo una vez. Usted está pasando una referencia de la función once allí, por lo que JS sabe qué controlador desenlazar. No lo llama cuando llama a removeEventListener.

La función se llama una vez que el usuario hace clic en el botón, en el controlador aparece console.log, y justo después se anulará el registro para que los últimos clics ya no activen esa función.

2
Martin Adámek 28 oct. 2017 a las 09:49

Déjame explicarte en una tabla de códigos ASCII:

               | script start | nothing happens | once() execute | nothing happens |
---------------|--------------|-----------------|----------------|-----------------|
"click" Events | once() added | once() waiting  | once() removed |                 |
               | lala() added | lala() waiting  | lala() waiting | lala() waiting  |

La función lala es la misma que una vez y se elimina de los eventos de "clic".

0
TessavWalstijn 28 oct. 2017 a las 10:03

Puede vincular múltiples eventos en javascript a un elemento en la misma acción.

Cuando desee eliminar un controlador en particular de los eventos vinculados, debe pasar ese nombre de función de controlador en removeEventListener. Si no pasa el segundo argumento en removeEventListener, simplemente eliminará todos los controladores para esa acción en ese evento.

En su caso, está eliminando el controlador once de sí mismo.

Un ejemplo con diferentes manejadores para ilustrar:

function firstListener(e) {
  console.log('firstListener');
}

function secondListener(e) {
  console.log('secondListener');

  // this will remove `firstListener` handler from subsequent button clicks
  e.target.removeEventListener('click', firstListener);
}

// bind first event handler function
document.querySelector('#btnMultiEvent').addEventListener('click', firstListener);

// bind second event handler function
document.querySelector('#btnMultiEvent').addEventListener('click', secondListener);
<button id="btnMultiEvent">Multiple Event Button</button>

Más información sobre removeEventListener

0
Faisal Sayed 28 oct. 2017 a las 10:01