Support AbortSignals in addEventListeners options to unsubscribe from events?

@domenic

Since Node added (experimental) support for AbortController, we have also added support for out event utility functions (that already work with EventTargets) for cancellation:

import { once, EventEmitter } from 'events';
import { setTimeout } from 'timers/promises;

const et = new EventTarget();
const ee = new EventEmitter();
const ac = new AbortController();

setTimeout(100).then(() => ac.abort());

let { signal } = ac;
// run with experimental tla flag or wrap in an iife
await once(ee, 'foo', { signal }); // cancel waiting for the event, removes the listener
await once(et, 'foo', { signal }); // same thing, with event target, removes the listener
for await(const item of on(ee, 'foo' , { signal } )) { // same thing, but with async iterator variant
}

It would be useful to "upstream" this behaviour to the DOM specification as it would be useful to have in browsers:

// Does not yet work, suggested:
const ac = new AbortController();
let { signal } = ac;
const et = new EventTarget();
et.addEventListener('foo', (e) => {
  
}, { signal } );
ac.abort(); // removes the listener from the event target, same as et.removeEventListener('foo', thatFunctionReference)

It's useful to use the web's cancellation platform (AbortController) to cancel listening to an event. This is also ergonomic for frameworks/libraries that set up a lot of event listeners and could unsubscribe from all of them in one go (through the controller).

Was this suggested at some point in the past? (I couldn't find it) Is this a good idea? A bad idea?

cc @domenic @annevk

I see, so this would remove event listeners upon the signal that is associated with them being aborted? I haven't seen suggestions for this.

I see, so this would remove event listeners upon the signal that is associated with them being aborted? I haven't seen suggestions for this.

Yes, basically it would be a way to make working with EventTargets more consistent with other DOM APIs.

For example: the person who asked me for this said "I need to make a few requests and subscribe to a few events when the user navigates to a certain page in my SPA. I am already using an AbortController to abort all the pending requests if the user navigates away - it would be very useful to also unsubscribe from all events the same way essentially having one way to 'cleanup' "

@mfreed7

This was suggested in the context of .on() and observables in #544, but extending addEventListener seems like a nice incremental approach.

I'm quite supportive of this change. @mfreed7 do you think this would be something the Chromium DOM team could plan to implement? I know it's always a bit hard to make the case for spending time on minor ergonomic improvements, but see above for some web developer testimony on why this would be appreciated.

@mfreed7

I'm quite supportive of this change. @mfreed7 do you think this would be something the Chromium DOM team could plan to implement? I know it's always a bit hard to make the case for spending time on minor ergonomic improvements, but see above for some web developer testimony on why this would be appreciated.

This definitely seems like a nice addition to the platform - I can see the use case for cleaning everything up in one way. I can't guarantee timing, but we could probably take a look at prototyping this, if someone else can handle the spec work?

Chromium bug filed: https://bugs.chromium.org/p/chromium/issues/detail?id=1146467

Sent an intent to prototype: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/9396JedBBOM
Implementation almost done: https://chromium-review.googlesource.com/c/chromium/src/+/2527343

@josepharhar

That's awesome @josepharhar thanks!

I've started working on WPTs here: web-platform-tests/wpt#26472 I haven't run them or tested them fully yet but feel free to use the cases.

Prototype of adding AbortController to addEventListener

Filed https://bugzilla.mozilla.org/show_bug.cgi?id=1679204

@annevk

@annevk can you please explain what the next steps in the process are?

We have:

WPTs at Test addEventListener abort signal web-platform-tests/wpt#26472
a spec PR at add signal to addEventListener #919
two browsers interested (Chrome and Firefox) and none opposed.

To be extra clear - I am in no rush, thankful that I get to work on this and am doing this for fun and to improve the web platform. I just want to understand what the next steps are.

Edit: I've also gone ahead and made a PR to Node.js to add this at https://github.com/nodejs/node/pull/36258/files

@benjamingr

Hey @benjamingr, everything looks pretty splendid! I left some comments on the PR and test PR, but nothing major. I think you covered all the bullet points from https://whatwg.org/working-mode#changes.

Add signal support to addEventListener()

Support AbortSignal in addEventListenerOptions to unsubscribe from ev…

I just filed an intent to ship for chrome so I can enable this feature by default.
This should probably get documented on MDN, right?

@whatwg/documentation it would be good to put this on MDN.

This will be enabled by default in chrome 90

Support AbortSignal in addEventListenerOptions to unsubscribe from ev…

FYI: I raised mdn/content#2759 with a patch that documents this feature in MDN. Review welcome (from anybody interested).

Oh great feature, so something like that below can be rewritten with AbortController

button.addEventListener('click', () => {
  // ...

  function closeByClick() {
    // ... do stuff
    closeButton.removeEventListener('click', closeByClick);
    window.removeEventListener('keydown', closeByEscape);
  }
  function closeByEscape(e) {
    if (e.key !== 'Escape') return;
    // ... do stuff
    closeButton.removeEventListener('click', closeByClick);
    window.removeEventListener('keydown', closeByEscape);
  }

  closeButton.addEventListener('click', closeByClick);
  window.addEventListener('keydown', closeByEscape);
});

like this:

button.addEventListener('click', () => {
  // ...
  const controller = new AbortController();

  closeButton.addEventListener('click', () => {
    // ... do stuff
    controller.abort();
  }, { signal: controller.signal });

  window.addEventListener('keydown', e => {
    if (e.key !== 'Escape') return;
    // ... do stuff
    controller.abort();
  }, { signal: controller.signal });
});

Bug 1676801 [wpt PR 26462] - Prototype of adding AbortController to a…

Navigation Menu

Repository navigation

Support `AbortSignal`s in `addEventListener`s options to unsubscribe from events? #911

11 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Support AbortSignals in addEventListeners options to unsubscribe from events? #911

Description

Activity

annevk commented on Oct 29, 2020

benjamingr commented on Oct 29, 2020

domenic commented on Oct 29, 2020

mfreed7 commented on Nov 6, 2020

mfreed7 commented on Nov 10, 2020

josepharhar commented on Nov 10, 2020

benjamingr commented on Nov 10, 2020

11 remaining items

smaug---- commented on Nov 24, 2020

benjamingr commented on Nov 25, 2020

annevk commented on Nov 30, 2020

josepharhar commented on Jan 26, 2021

annevk commented on Jan 26, 2021

josepharhar commented on Jan 28, 2021

jimmywarting commented on Feb 6, 2021

sideshowbarker commented on Feb 28, 2021

caub commented on Apr 29, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Support `AbortSignal`s in `addEventListener`s options to unsubscribe from events? #911