mdn
Event documentation no longer depicts "bubbles" information.
MDN URL
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event
What specific section or headline is this issue about?
Information about EventInit flags
What information was incorrect, unhelpful, or incomplete?
MDN used to have information about event bubbles front-and-center. This is one of the main reasons I look at documentation on events as a developer. In particular, when dealing with form nuance — it's easy to forget whether things like change or input or invalid bubble.
Thanks very much for your consideration!
What did you expect to see?
I expect to see a flag depicting whether or not the event bubbles. Here's a screen grab from the way back machine. Here's the live link as well: https://web.archive.org/web/20210225074714/https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event
Do you have any supporting links, references, or citations?
Previous rendering of an example page: https://web.archive.org/web/20210225074714/https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event
Do you have anything more you want to share?
No response
MDN metadata
Page report details
- Folder:
en-us/web/api/htmlinputelement/invalid_event - MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event
- GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/htmlinputelement/invalid_event/index.md
- Last commit: https://github.com/mdn/content/commit/a36633398f827c87eb593f9647ed00bf33fd5b34
- Document last modified: 2022-09-13T19:34:57.000Z
Hey @theengineear -- during the migration to a new page layout for event pages, we removed those tables as we merged the information into the writing itself. If an event is cancellable or does not bubble, you will now see a line near the top that says "This event is not cancellable" or "This event does not bubble". In other words, the information has not been removed, it's just represented in a different form.
Hope this helps!
Thanks for the explainer @queengooborg. Having that information in the prose is totally fine by me. However, when I search “bubble” on that page, I don't see anything come up. Am I missing something? To be really clear, I'm talking about this page in particular: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event
That would mean that this event bubbles and is cancellable - do you know different?
FWIW @queengooborg I question the decision to move into prose - the reason being that before we knew the states - but now we could just have omitted information. Further, if this information can be extracted from IDL we could automate populating this, and if not, we could have as metadata.
The invalid event does not bubble. In the screen recording (from Chrome) the logs indicate that the event is being fired on the input element during constraint validation and the delegated event listener on the parent form never hears it.
You can test this out with the following html file:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>invalid event demo</title>
</head>
<body>
<form id="form">
<input id="input" name="input" required/>
<input type="submit"/>
<pre id="log"></pre>
</form>
</body>
<script>
const form = document.getElementById('form');
const input = document.getElementById('input');
const log = document.getElementById('log');
form.addEventListener('submit', event => {
event.preventDefault();
log.textContent += 'form::submit\n';
});
form.addEventListener('invalid', () => {
log.textContent += 'form::invalid\n';
});
input.addEventListener('invalid', () => {
log.textContent += 'input::invalid\n';
});
</script>
</html>