Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

"When an event is dispatched to an object that p..." #888

Closed
kevinsung opened this issue Sep 7, 2020 · 1 comment · Fixed by #890
Closed

"When an event is dispatched to an object that p..." #888

kevinsung opened this issue Sep 7, 2020 · 1 comment · Fixed by #890

Comments

@kevinsung
Copy link

https://dom.spec.whatwg.org/commit-snapshots/8f20138c9510c7f4a7d01dbb5e24175e72fc9734/#synthetic-events

When an event is dispatched to an object that participates in a tree (e.g. an element), it can reach event listeners on that object’s ancestors too. First all object’s ancestor event listeners whose capture variable is set to true are invoked, in tree order. Second, object’s own event listeners are invoked. And finally, and only if event’s bubbles attribute value is true, object’s ancestor event listeners are invoked again, but now in reverse tree order.

Let’s look at an example of how events work in a tree:​

<!doctype html>
<html>
<head>
<title>Boring example</title>
</head>
<body>
<p>Hello <span id=​x>world</span>!</p>
<script>
function test(e) {
debug(e.target, e.currentTarget, e.eventPhase)
}
document.addEventListener("hey", test, {capture:​ true})
document.body.addEventListener("hey", test)
var ev =​ new Event("hey", {bubbles:​true})
document.getElementById("x").dispatchEvent(ev)
</script>
</body>
</html>

The debug function will be invoked twice. Each time the event’s target attribute value will be the span element. The first time currentTarget attribute’s value will be the document, the second time the body element. eventPhase attribute’s value switches from CAPTURING_PHASE to BUBBLING_PHASE. If an event listener was registered for the span element, eventPhase attribute’s value would have been AT_TARGET.

I find this hard to follow, so I think it could use clarification (or perhaps I am just missing something). Following the first paragraph, this is what I would expect to happen in the example:

  1. First all object’s ancestor event listeners whose capture variable is set to true are invoked, in tree order.

The object (the span element) has exactly one ancestor event listener with capture variable set to true (the document). So that listener is invoked.

  1. Second, object’s own event listeners are invoked.

The object (the span element) has no event listeners, so nothing is invoked.

  1. And finally, and only if event’s bubbles attribute value is true, object’s ancestor event listeners are invoked again, but now in reverse tree order.

The wording here is unclear as to whether the invoked ancestor event listeners must have capture variable set to true. The use of the word "again" suggests that this should be so. In either case, since the event listeners are to be invoked "again," I expect the event listener of the document to be invoked again. Instead, only the body element has its event listener invoked, even though it was not invoked during the capturing phase.
annevk added a commit that referenced this issue Sep 9, 2020
@annevk
DOM Events introduction: clarify how listeners are invoked
cd802c8 
Fixes #888.
@annevk annevk mentioned this issue Sep 9, 2020
Merged
@annevk
Copy link
Member

annevk commented Sep 9, 2020

Thank you for taking the time to report this @kevinsung. It was indeed wrong. I put up a suggested replacement over at #890 and would appreciate your review.

annevk added a commit that referenced this issue Sep 10, 2020
@annevk
DOM Events introduction: clarify how listeners are invoked
12beda2 
Fixes #888.
mfreed7 pushed a commit to mfreed7/dom that referenced this issue Sep 16, 2020
@annevk @mfreed7
DOM Events introduction: clarify how listeners are invoked
fcd6dd5 
Fixes whatwg#888.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

DOM Events introduction: clarify how listeners are invoked whatwg/dom
2 participants
@annevk @kevinsung