• Thursday , 4 June 2020

Event Bubbling and Capturing in JavaScript

Code Canyon



Understanding Event Bubbling and Event Capturing phase in DOM and how to use it.

Event Bubbling
————————
Event bubbling directs an event to its intended target, it works like this: A button is clicked and the event is directed to the button. If an event handler is set for that object, the event is triggered. If no event handler is set for that object, the event bubbles up (like a bubble in water) to the objects parent.

Original source

3d Ocean

Related Posts

31 Comments

  1. Tyrone Slothdrop
    April 22, 2019 at 17:07

    I guess, for me, the obvious question is, why should click events be executed on buttons we never clicked on?

  2. pratibha kshirsagar
    April 22, 2019 at 17:07

    Nice…sir

  3. Zachary Morel
    April 22, 2019 at 17:07

    This was a great review, thank you!

  4. Osazeme Usen
    April 22, 2019 at 17:07

    Amazing explanation. Thank you for taking your time to produce this great content. I did a little search and found this below!

    Event capturing in jquery
    https://stackoverflow.com/questions/17249125/event-capturing-jquery

  5. Jon Dyason
    April 22, 2019 at 17:07

    thanks. Helped me!

  6. Choco late
    April 22, 2019 at 17:07

    Which IDE are you using?

  7. pagadala haritha
    April 22, 2019 at 17:07

    Sir please explain prevent default and stop propogation with example

  8. Nigel Doyle
    April 22, 2019 at 17:07

    Very helpful. Thanks for your time.

  9. Chirag Ramdas
    April 22, 2019 at 17:07

    Very informative, clearly explained

  10. Jonathan Makover
    April 22, 2019 at 17:07

    Hey, how's it going? I have a problem here. "Event Bubbling.js:25 Uncaught TypeError: Cannot read property 'addEventListener' of null" why doesn't it recognize this? can you help me please?

  11. Myles Gmail
    April 22, 2019 at 17:07

    I just tweeted this!

  12. Myles Gmail
    April 22, 2019 at 17:07

    I Liked this n posted it on Facebook! U have an awesome channel!

  13. احمد ربيع
    April 22, 2019 at 17:07

    really good explanation thank you i was so confused about event phases but now it's clear to me

  14. Sunil Kumar Mishra
    April 22, 2019 at 17:07

    What if 1 is true and 2 is false?

  15. Pulp Free Press
    April 22, 2019 at 17:07

    Clearly explained. Thank you!

  16. Mohan Madheshwaran
    April 22, 2019 at 17:07

    I want to see the real project example of Event Bubbling and Event Capturing, to understand how it works in real scenario

  17. Lasal Uduwara
    April 22, 2019 at 17:07

    Awesome tutorials. Good luck..!!!

  18. JH5280
    April 22, 2019 at 17:07

    Best teacher on YouTube hands down

  19. Shikhar Saxena
    April 22, 2019 at 17:07

    Which Code Editor is being used in the video?

  20. Dobariya Dhaval
    April 22, 2019 at 17:07

    Great Explanation in simple words awesome 🙂

  21. SIDDHESH KULKARNI
    April 22, 2019 at 17:07

    That was good explanation.
    Could you please answer below questions?

    How to stop bubbling?
    What is difference between stopPeopagation and preventDefault?
    What is use of cancelBubble?

    Also we are waiting for your new videos on interview questions to experienced developer.

    Thank you

  22. Swathi Cse
    April 22, 2019 at 17:07

    HI Sir .. You are really helping a lot in understanding the depth of the concepts of JavaScript…

  23. Imtiyaz Ahmad
    April 22, 2019 at 17:07

    Cool explaination, thanks

  24. Kevin Bridges
    April 22, 2019 at 17:07

    props to that explanation clearer than a transparent bravo

  25. Jonatan
    April 22, 2019 at 17:07

    lots of children and parents executed

  26. Pradeep Kumar
    April 22, 2019 at 17:07

    It's Just amazing.

  27. AdiL IsmaiL
    April 22, 2019 at 17:07

    It is incomplete you didnt say how to stop thebpropogation..

  28. Shyar Xelil
    April 22, 2019 at 17:07

    Why don't you use e.target property?

  29. Alexander Dominguez
    April 22, 2019 at 17:07

    Very good tutorial, thank you

  30. Charu Gupta
    April 22, 2019 at 17:07

    I'm confused. If capturing is the default behaviour in modern browsers then how come, when you wrote the JS code, bubble is being performed?

  31. Joseph Lander
    April 22, 2019 at 17:07

    thank you

Leave A Comment

You must be logged in to post a comment.