W jaki sposób to zapisać? Czy da się w ogóle?

pytanie zadane 21 września 2022 w JavaScript przez Doge Gaduła (3,370 p.)

Witam, czy da się zrobić funkcję

    document.querySelector('body').addEventListener('click', e => {
        closest = e.target.closest(".menu, .menu-btn");
        if(!closest) close_menu();
    });

tak, aby móc ją później usunąć? Ponieważ teraz jest anonimowa i nie da się jej usunąć.

2 odpowiedzi

odpowiedź 21 września 2022 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 27 października 2022 przez Doge

Najlepsza

Jeśli chcesz, aby event listener wykonał się tylko raz, to możesz użyć opcji { once: true }. W przeciwnym razie musisz mieć referencję do callbacka, czyli go nazwać, żeby go przekazać do removeEventListener.

Na przykład:

document
  .querySelector('body')
  .addEventListener('click', function onBodyClick(e) /* funkcja nazwana */ {
    closest = e.target.closest(".menu, .menu-btn");
    if(!closest) close_menu();

    if (someConditionHere) { // na jakiś warunek
      e.currentTarget.removeEventListener('click', onBodyClick); // usuń listener
    }
  });

odpowiedź 22 września 2022 przez VBService Ekspert (252,740 p.)
edycja 22 września 2022 przez VBService

Anonimowy EventListener można "usunąć" też za pomocą: AbortController.abort() i trzeciego parametru o nazwie signal

addEventListener(type, listener, options = {signal})

signal Optional

An AbortSignal. The listener will be removed when the given AbortSignal object's abort() method is called. If not specified, no AbortSignal is associated with the listener.

przykład

<body data-counter="0"></body>

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: white;
  transition: background 400ms;
}
body:active {
  background-color: gray;
}
body:before {
  position: absolute;
  top: 1em;
  left: 1em;
  content: attr(data-counter);
  font: 700 1em/1.1 system-ui;
}

let i=0;
const controller = new AbortController();

document.querySelector('body').addEventListener('click', _=> {
  document.body.dataset.counter = ++i;

  // remove listener gdy "i" osiągnie wartość większą od 9
  if (i > 9) controller.abort();
}, {signal: controller.signal});

komentarz 23 września 2022 przez Comandeer Guru (600,810 p.)

Można, ale AbortController nie służy do tego typu rzeczy. Został zaprojektowany w celu kontrolowania operacji asynchronicznych, np. przerwanie fetch(), gdy z jakiegoś powodu już nie potrzebujemy tych danych. W przypadku event listenerów głównym use case'em jest raczej odpinanie wielu listenerów naraz albo właśnie odpinanie ich na podstawie jakichś zmian w innych częściach aplikacji (np. wystąpił błąd gdzieś wyżej, więc odpinamy listenery, żeby nie generować więcej problemów).

komentarz 23 września 2022 przez VBService Ekspert (252,740 p.)
edycja 23 września 2022 przez VBService

Można, ale AbortController nie służy do tego typu rzeczy.

Ja tu żadnego koła na nowo nie wynajduje skoro dokumentacja podaje taki przykład.

This example demonstrates how to add an addEventListener() that can be aborted with an AbortSignal.

Using AbortController as an Alternative for Removing Event Listeners

Aborting event listeners in vanilla JS

Benefits

This may seem more verbose, but it has a couple of benefits:

You can remove multiple event listeners at once. Just associate them all with the same AbortSignal.

You can remove anonymous event listeners. The .removeEventListener() method only works with named functions.

Browser support

The AbortController interface has been around for a little while. However, the options.signal property is very new to the .addEventListener() method.

Can I use: AbortController

komentarz 23 września 2022 przez Comandeer Guru (600,810 p.)

Ta sama dokumentacja dla samego AbortController podaje to:

The AbortController interface represents a controller object that allows you to abort one or more Web requests as and when desired.

Co wskazywałoby na to, że nie jest to wszystko do końca dopracowane.

Specyfikacja pokazuje przykład użycia AbortControllera o wiele bardziej zbliżony do tego, o czym mówiłem: jakaś asynchroniczna akcja kontrolowana z zewnątrz.

I tak też jest to najczęściej wykorzystywane: