Cover Photo by Ambitious Creative Co. - Rick Barrett on Unsplash
Most web pages are interactive and users can perform actions on the web page. ...
For further actions, you may consider blocking this person and/or reporting abuse
Thanks for the article, Sarah.
One question about the browser events bothers me for some time. You mentioned the third parameter
useCapture
when adding a listener to a DOM node. When readng fellow developers code sometimes I see boolean values true/false, sometimes objects {useCapture: true}. What's the difference between them? And what was the purpose to implement both options in browsers if there is no difference between them?Sarah mentions it in the article. 😀
"The difference between bubbling and capturing is that in the bubbling phase, events propagate outwards. That is, the handler on the innermost element gets triggered first, then the parent all the way up.
In capturing, the reverse occurs. The handler on the outermost element is triggered first and then the child handler all the way down to the element where the event occurred. "
I mean there are two ways to add event listener in capture phase:
The result will be the same.
So my question was: is there any difference in these statements or they do exactly the same thing?
Hi Eugene.
They do exactly the same thing.
true
is a shorthand for{capture: true}
.Thanks for reading my article.
Ahh, sorry misunderstood what you were asking. 🙃 I believe Sarah just answered you.
Excellent explanation Sarah. Keep up this great work.
Thank you John.
Thanks for sharing.. Just want to add, using arrow function as eventListener callback will make the element lose the this context...
compared to this
Budy, sorry but I don't notice any difference in the two snippets ... maybe the latter should be a regular function declaration such as "function(event) {...}" ?
thank you, happy Easter!
Sorry, I've updated the snippet :)
Nice summary 👌
Great explanation Sarah. Bubbling is so powerful because it allows you to reduce the potential number of events added to a page. Too many events can bog down a site.
I did a hello world in web components a couple of years ago, but haven't touched them since. Thanks for the refresher!
I'd just make one suggestion about adding event listeners. This is not web component specific, but for adding event listeners in general. In the case of the
rainbow-text
component, the number of<span />
s increases for every additional letter in thetext
attribute, so the number of event listeners per instance of the component is n letters * 2 (mouse over + animation end events).You can end up with a lot of events very quickly just for one instance of the component. What you can do is add an event listener for each event type on the parent
<div />
you create in aspittel/rainbow-word-webcomponent and then the power of event bubbling is your friend.e.g.
great code
thank you, Sarah. simple and clear. have nice days
This is a great overview, thank you Sarah! Always love to see great vanilla JS resources.