[whatwg/dom] Allow custom activation behavior to be added to an event (Issue #1320)

### What problem are you trying to solve?

```js
const button = document.querySelector('button');

button.addEventListener('click', (event) => {
  // …
});
```

I want to add activation behavior to the above button, such as checking a custom checkbox.

### What solutions exist today?

```js
const button = document.querySelector('button');

button.addEventListener('click', (event) => {
  if (event.defaultPrevented) return;
  checkCustomCheckbox();
});
```

This isn't great because the default may be prevented by a listener further along the path.

```js
const button = document.querySelector('button');

button.addEventListener('click', (event) => {
  setTimeout(() => {
    if (event.defaultPrevented) return;
    checkCustomCheckbox();
  }, 0);  
});
```

This isn't great because the effect may happen a frame later (`rAF` isn't a reliable solution here due to https://github.com/whatwg/html/issues/10113). It's also observably async:

```js
button.click();
console.log(customCheckboxChecked); // expected true, but got false
```

### How would you solve it?

Something like:

```js
const button = document.querySelector('button');

button.addEventListener('click', (event) => {
  event.addActivationCallback(() => {
    checkCustomCheckbox();
  });
});
```

### Anything else?

_No response_

-- 
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/1320
You are receiving this because you are subscribed to this thread.

Message ID: <whatwg/dom/issues/1320@github.com>

Received on Thursday, 31 October 2024 10:44:10 UTC