search

panzerdp / dmitripavlutin.com-comments

7 stars 0 forks source link

/javascript-event-delegation/ #76

Open panzerdp opened 3 years ago

panzerdp commented 3 years ago

Written on 07/10/2020 13:41:30

URL: https://dmitripavlutin.com/javascript-event-delegation/

vijeysrc commented 3 years ago

Nice article. I remember consciously following this pattern during my jQuery days with $.live method.

I thought this pattern was not used in React as we add the onChange method on every item. But later I learnt that React does use this pattern and it places all the handlers at Document level.

panzerdp commented 3 years ago

Nice article. I remember consciously following this pattern during my jQuery days with $.live method.

I thought this pattern was not used in React as we add the onChange method on every item. But later I learnt that React does use this pattern and it places all the handlers at Document level.

Thanks! Note that as of React 17, the event handlers are attached at the root element level.

YazanSneneh commented 3 years ago

I register to thank you <3 still one thing not clear, what is bubbling exactly ? i understand capturing travel from windows to element triggered the event and down the road will check which element triggered the vent. then find the element that fired the event(the target).

bubble travel back but if we reach the element before the bubbling, so why is it important ?

panzerdp commented 3 years ago

bubble travel back but if we reach the element before the bubbling, so why is it important ?

The event bubbling is what allows the implementation of the event delegation.

Because the bubbling event travels from target to window (upwards), you can catch the bubbling event on the parent element (the delegate) and check the target element.

YazanSneneh commented 3 years ago

ahaaaa, the bubbling take the event.target and travel back to window object then tell it this is the element that fired the event ?

panzerdp commented 3 years ago

ahaaaa, the bubbling take the event.target and travel back to window object then tell it this is the element that fired the event ?

Exactly. That allows the event delegation to work.

remigioh commented 3 years ago

Thanks Dmitri for your article. Very clear and concise.

I want to share a shorter and clean code of your last example of event delegation, using directly the global variable define by the value of the id attribute of the

and event.target.matches('button') so we don't need to define class attribute in the button elements.

<!DOCTYPE html>

Event Delegation Example
Do you have experience if using directly the global variable define by the id value instead of using document.getElementById() for mobile Apps these run OK. Remigio
aysha2502 commented 3 years ago

Pretty extensively beneficial.

NagarajukKommisetty2019 commented 2 years ago

Very good explanation , thank you.

lalomax commented 1 year ago

Good article. 👌😎

panzerdp commented 1 year ago

@lalomax Glad you like it!

MiguelNegron1 commented 10 months ago

The article was very helpful, hope you continue doing what you like.