Can "AbortController" be used as a functional alternative to "removeEventListener"?

user_360811 0
Viewed 205

I've just learnt that in modern browsers one can cancel events handlers permanently via AbortSignal.

Here's a small proof-of-concept (checkout this pen for a demo):

let container = () => document.getElementById('container');
let cancelButton = () => document.getElementById('cancel');

function main() {  
 let controller = new AbortController();
 let signal = controller.signal;

  container().addEventListener("click", function() {
      alert("I'm being clicked!!!");
  }, {signal});
  
  cancelButton().addEventListener("click", function() {
    alert('Ha ha!!! Your yellow square event is cancelled!!!');

     controller.abort();
     container().innerText = "click me no more";
 });
}

This works. However, docs are stating following:

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

That said, it nowhere in documentation it is stated that:

  1. AbortController can be applied to any arbitrary event (in the doc following terminology is used - DOM requests, Web requests).
  2. Consequences of its usage are exact equivalent of calling 'removeEventListener'.

So my question is - can I use AbortController as a functional alternative to removeEventListener?

dom-events javascript
1 Answers

As per MDN docs (options parameter -> signal) - yes, you can use AbortSignal.abort() as an alternative to removeEventListener since:

The listener will be removed when the given AbortSignal’s abort() method is called.

user_94305880
Related