Explain event handlers and capturing #13877

timeowilliams · 2022-03-15T04:13:03Z

Summary

Added statement about how the capture process within event lifecycles is optional.

Motivation

To allow readers of the documentation get a better grasp of the three stages and what is/not optional.

Supporting details

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#bubbling_and_capturing_explained
#13749

Related issues

Fixes #13749

Metadata

Adds a new document
Rewrites (or significantly expands) a document
Fixes a typo, bug, or other error

github-actions · 2022-03-15T04:15:08Z

Preview URLs

https://pr13877.content.dev.mdn.mozit.cloud/en-US/docs/Learn/JavaScript/Building_blocks/Events

Flaws

URL: /en-US/docs/Learn/JavaScript/Building_blocks/Events
Title: Introduction to events
on GitHub
Flaw count: 1

broken_links:
- Can't resolve https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

External URLs

URL: /en-US/docs/Learn/JavaScript/Building_blocks/Events
Title: Introduction to events
on GitHub

https://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html (1 time) (Note! This may be a new URL 👀)
https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html (1 time) (Note! This may be a new URL 👀)
https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html (1 time) (Note! This may be a new URL 👀)
https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html (1 time) (Note! This may be a new URL 👀)
https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html (1 time) (Note! This may be a new URL 👀)
https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html (1 time) (Note! This may be a new URL 👀)

(this comment was updated 2022-03-26 07:06:30.971606)

teoli2003 · 2022-03-15T04:32:31Z

@OndeVai, can you review this?

wbamberg

Thanks for your PR! I think it would be better to have this after

content/files/en-us/learn/javascript/building_blocks/events/index.md

Lines 630 to 635 in 056aed1

    
           In modern browsers, by default, all event handlers are registered for the bubbling phase. 
        
           So in our current example, when you select the video, the event bubbles from the `<video>` element outwards to the `<html>` element. 
        
           Along the way: 
        
           - It finds the `click` handler on the `video` element and runs it, so the video first starts playing. 
        
           - It then finds the `click` handler on the `videoBox` element and runs that, so the video is hidden as well.

, which talks about bubbling being the default.

I think it could also be more precise, something like:

In modern browsers, by default, event handlers are not registered for the capturing phase. To register an event handler for the capturing phase, instead of the bubbling phase, pass the useCapture argument or the capture option to addEventListener().

timeowilliams

Addressing requested changes

wbamberg · 2022-03-26T17:47:54Z

Thanks for the update!

This section:

In modern browsers, by default, all event handlers are registered for the bubbling phase. So in our current example, when you select the video, the event bubbles from the

It finds the click handler on the video element and runs it, so the video first starts playing.

It then finds the click handler on the videoBox element and runs that, so the video is hidden as well.

...is talking about the bubbling phase. By splicing stuff about capturing in, it doesn't make sense any more.

I think the part about enabling capturing should go after this, like:

In modern browsers, by default, all event handlers are registered for the bubbling phase. So in our current example, when you select the video, the event bubbles from the

It finds the click handler on the video element and runs it, so the video first starts playing.

It then finds the click handler on the videoBox element and runs that, so the video is hidden as well.

In modern browsers, by default, event handlers are not registered for the capturing phase. To register an event handler for the capturing phase, instead of the bubbling phase, pass the useCapture argument or the capture option to addEventListener().

Also, when your edit says "*Generally when event handlers are added to HTML code" - what work is "Generally" doing here? Usually when I see this word I think it means "usually but not always", and in documentation this makes me think, "when isn't it?" and if the documentation doesn't go on to explain that case, then I am left confused.

wbamberg

Changes requested in #13877 (comment).

sideshowbarker · 2022-07-12T06:52:48Z

@timeowilliams This seems to be waiting on your response to #13877 (comment)

wbamberg · 2022-08-26T23:53:13Z

Closing in favour of #20013.

Resolve mdn#13749

aeb7b66

timeowilliams requested a review from a team as a code owner March 15, 2022 04:13

timeowilliams requested review from sideshowbarker and removed request for a team March 15, 2022 04:13

github-actions bot added the Content:Learn Learning area docs label Mar 15, 2022

wbamberg requested changes Mar 18, 2022

View reviewed changes

sideshowbarker removed their request for review March 22, 2022 02:39

Update index.md

2e3f674

timeowilliams commented Mar 26, 2022

View reviewed changes

timeowilliams requested a review from wbamberg March 26, 2022 07:05

wbamberg requested changes Mar 26, 2022

View reviewed changes

Josh-Cena changed the title ~~Resolve #13749~~ Explain event handlers and capturing Jul 22, 2022

Josh-Cena added the awaiting response Awaiting for author to address review/feedback label Aug 9, 2022

wbamberg closed this Aug 26, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Explain event handlers and capturing #13877

Explain event handlers and capturing #13877

timeowilliams commented Mar 15, 2022

github-actions bot commented Mar 15, 2022 •

edited

Loading

teoli2003 commented Mar 15, 2022

wbamberg left a comment

timeowilliams left a comment

wbamberg commented Mar 26, 2022

wbamberg left a comment

sideshowbarker commented Jul 12, 2022

wbamberg commented Aug 26, 2022

	In modern browsers, by default, all event handlers are registered for the bubbling phase.
	So in our current example, when you select the video, the event bubbles from the `<video>` element outwards to the `<html>` element.
	Along the way:

	- It finds the `click` handler on the `video` element and runs it, so the video first starts playing.
	- It then finds the `click` handler on the `videoBox` element and runs that, so the video is hidden as well.

Explain event handlers and capturing #13877

Explain event handlers and capturing #13877

Conversation

timeowilliams commented Mar 15, 2022

Summary

Motivation

Supporting details

Related issues

Metadata

github-actions bot commented Mar 15, 2022 • edited Loading

Preview URLs

Flaws

External URLs

teoli2003 commented Mar 15, 2022

wbamberg left a comment

Choose a reason for hiding this comment

timeowilliams left a comment

Choose a reason for hiding this comment

wbamberg commented Mar 26, 2022

wbamberg left a comment

Choose a reason for hiding this comment

sideshowbarker commented Jul 12, 2022

wbamberg commented Aug 26, 2022

github-actions bot commented Mar 15, 2022 •

edited

Loading