Event Bubbling, Capturing aka Trickling in Javascript | Oyo UI/Frontend Interview Question

Поделиться
HTML-код
  • Опубликовано: 4 ноя 2024

Комментарии • 337

  • @zahebshamsi
    @zahebshamsi 5 лет назад +256

    Guess i need to write a script to auto-like all your videos because you deserve one.
    Great job sir :P

    • @vigneshr8073
      @vigneshr8073 4 года назад +4

      Yeah Exactly. What a man he is!
      My Eye Opener for JS

    • @kiranvaddy7302
      @kiranvaddy7302 3 года назад +12

      document.querySelector("#top-level-buttons-computed > ytd-toggle-button-renderer:nth-child(1)").click()

    • @mohityadav21
      @mohityadav21 3 года назад

      @@kiranvaddy7302 It works but the like button color doesn't change. Any idea why?

    • @Coding_Rights
      @Coding_Rights Год назад +1

      I think you are not using proper propagation… try to use event capturing 😂😂

  • @Nischalthegenius
    @Nischalthegenius 5 лет назад +16

    I have a JavaScript-based interview in 3 weeks and this comes as a life-saver. Thankyousomuch.

  • @jacintdavid5333
    @jacintdavid5333 3 года назад +43

    Thanks for the elaboration! I was reading Jon Duckett's JS book and couldn't find an explanation to what happens when the boolean values are mixed like in your example. All clear now!

  • @Adnan-td5iq
    @Adnan-td5iq Месяц назад +1

    hats off to you sir i watched lot of videos but nobody explained this topic in depth you explained it with simple example thank you so much lots of love from kashmir

  • @anjalii1102
    @anjalii1102 Год назад +6

    thanks a lot
    Capturing phase - the event goes down to the element.
    Target phase - the event reached the target element.
    Bubbling phase - the event bubbles up from the element.
    elem.addEventListener( event, callack, capture)
    If it’s false (default), then the handler is set on the bubbling phase.
    If it’s true, then the handler is set on the capturing phase.
    event.stopPropagation() stops the bubbling

  • @W3490NX
    @W3490NX 4 года назад +2

    You are exceptional. I started with Javascript Namaste and now I can not get enough. I have to find old videos to learn as much as I can. Thank you so much for such great effort.

  • @dipeshjoshi9126
    @dipeshjoshi9126 Год назад +1

    i seen this video after 4 years .its amazing .thats why people say "akshay bhaiya hai js god"

  • @SahilJassal-b7y
    @SahilJassal-b7y 8 месяцев назад +12

    Still relevant in 2024

  • @ariesviclamanilao7427
    @ariesviclamanilao7427 5 лет назад +8

    You got my respect. Nice explanation since from the beginning of the demonstration :)

  • @prashantgupta9045
    @prashantgupta9045 4 года назад +11

    Recently I found this question in amazon banglore interview that time I know the definition but today it's clear . Really appreciated.

    • @prashantgupta9045
      @prashantgupta9045 4 года назад +3

      As of now I'm preparing myself for good companies and I'm frontend developer . So the question is if I'll go for big companies like uber, ola, microsoft, Amazon, linkedin so what is the possibility to ask the question in data structure or I should focus only on JavaScript coz previous time didn't get any questions from ds in amazon. Your reply will fruit full.

  • @benbrahimilias426
    @benbrahimilias426 2 года назад

    I swear that this is the best explanation in youtube.

  • @rohitkudalkar92
    @rohitkudalkar92 4 года назад +2

    SIr you are the best guru for javascript for all.Thanks you so much for all you efforts. Love❤️ ans Support.

  • @prabhjotkalra7479
    @prabhjotkalra7479 4 года назад +4

    This video definitely deserve a SHOUT-OUT!! Awesome hands-on explanation of capturing and bubbling :)

  • @techtube2404
    @techtube2404 3 года назад +7

    Just an add-on topic to read on is e.preventDefault() and passive event listeners. The former is to prevent the default action that the browser performs on that event and later is a way to remove the scroller janky and improve scroller performance on mousewheel/touchstart event by telling the browser to go ahead and perform scroll without waiting for the callback method to execute first.

  • @WELOVEWRESTLIN
    @WELOVEWRESTLIN 4 года назад +10

    You got yourself a sub, and a buyer, if you launch your course on Udemy..Btw you must be having a good teacher like yourself

  • @faizanusmani1039
    @faizanusmani1039 Год назад

    Zabardast bhai......Capturing aur Bubbling cycle aur Stop Propagation bahut zabardast samjhaya hai

  • @missinglink2416
    @missinglink2416 3 года назад

    men.. your words and examples can make any grade student undertand this type of concepts..awesome work!!!!

  • @indianinvestor1301
    @indianinvestor1301 2 года назад +1

    bro clean content ,easily understanding

  • @SujitGawand0001
    @SujitGawand0001 7 месяцев назад +1

    Today, i was trying to write same code mentioned in this tutorial, but I made slight change like Instead of keeping script tag bottom of page before body ends, I added it at head tag. and I start getting errors. After that I start googling why this is happening then I came to know that if I am using script tag on head then I need to pass defer argument along with it to made HTML parse first and load the DOM properly before execution of script. Thanks akshay for keeping defer and async method before this method, so I am able to relate why I need to use defer in this case.

  • @danielmadison4451
    @danielmadison4451 2 года назад

    Great job. I love the way you ACTUALLY explain what is happening with the white board first. Emphasizing Bubble up and trickle down. Thanks for this.

  • @rameshn8397
    @rameshn8397 4 года назад +8

    Dude, This is a gunshot explanation. Even a baby can understand and can never forget. You rock !!!
    Can you give the base idea of how you learned MERN? What all resources you followed in becoming a Full Stack Developer at Uber.

  • @SrinubabuRavilla
    @SrinubabuRavilla 2 года назад

    OOOhhhh is this this much easier to understand these concepts.... Thank you Akshay Saini.

  • @profjs2398
    @profjs2398 3 года назад +1

    Akshay, I feel like I'm back in school - this was an excellent lecture, thank you.

  • @JitenderKumar-gq2fw
    @JitenderKumar-gq2fw 10 месяцев назад

    amazing Dear Akshay, I've watched a lot of videos on propagation, but your instruction is excellent. Thanks you so much for the video.

  • @yashpaota
    @yashpaota Год назад

    Very Well explained bro with practical explanation......Great work Akshay Bro.

  • @trekwithchetaas
    @trekwithchetaas 5 лет назад +1

    Bro Ekdum Kdkkkkkk DIrect Concept Clear Ho Gaye

  • @asadbd
    @asadbd 2 года назад

    Great Great Great Video For Understanding Event Bubbling, Event Capturing & Event Propagation Handling In Javascript. ❤love it

  • @vijaysajjan133
    @vijaysajjan133 5 лет назад +1

    Your videos are very simple and informative. Anybody can understand by watching it. Please make more videos.

  • @bahaakrayem4104
    @bahaakrayem4104 5 лет назад +8

    Finally this concept explained well.. Thanks a lot ❤

  • @mearn_ctaftsman
    @mearn_ctaftsman 2 года назад +1

    Your videos like how a mother feeds her child 🍯.
    🙏🙏🙏🙏🙏

  • @user1902-b7e
    @user1902-b7e 4 года назад +1

    You are the real JS guru

  • @vikramksrm
    @vikramksrm 2 года назад

    You have brought back my LOVE for programming _/\_ _/\_ _/\_

  • @aparnas-i9s
    @aparnas-i9s Год назад

    Perfect bro..
    All your examples are very clear and concise.. That I will always remember easily.. We want more concepts and videos..

  • @sharmilak5109
    @sharmilak5109 Год назад

    Akshay all your contents are worthy and there is a neat explanation of topics /for a beginners like me

  • @vikramsharma1192
    @vikramsharma1192 4 года назад +1

    Explained effortlessly, great job Akshay

  • @ashutoshranjan4644
    @ashutoshranjan4644 Год назад

    I just learn this concept in a very simple and precise way. Thanks Askhay💜💜.

  • @IFennecYouCODM
    @IFennecYouCODM 11 месяцев назад +1

    the div#grandParent>div#Parent>div#Child part was new for me.

  • @parshuramkharade3705
    @parshuramkharade3705 3 года назад

    Help me a lot to learn JavaScript ….simple nd clear explanation ..Thanks :)

  • @khurshedaalam7478
    @khurshedaalam7478 2 года назад

    Gjab bhai always listen eventlooop and bubling now i come to understand great bro

  • @chitransh118
    @chitransh118 4 года назад +1

    Encounter best explanation of JS concepts on ur channel, kudos!!!

  • @namankeshari7332
    @namankeshari7332 Год назад +1

    This was very insightful! Thanks a bunch for this one!

  • @webdev1719
    @webdev1719 2 года назад +2

    It was too complicated before watching this video. Now its too easy.

  • @apoorvakhairnar7125
    @apoorvakhairnar7125 4 года назад

    It was amazing video. My interest level towards JavaScript is increasing by watching your videos. Thank you for sharing your knowledge.

  • @kamranansari65
    @kamranansari65 2 года назад

    Akshay sir, i am in love with u.... the concept that u gave me is beyond my explanation.... really thanks to ur effort that u put to deliever this kind of quality stuffs....

  • @bssushmitha6534
    @bssushmitha6534 4 года назад +1

    Very clear and well explained with many examples !!. Thank You, Akshay.

  • @nanguramyareddy9418
    @nanguramyareddy9418 Месяц назад

    I am 🥹addicted to your teaching. Everyday I am searching for which video I missed in the playlist.

  • @ashirbad29
    @ashirbad29 4 года назад +1

    very thorough explanation bhaiya..... great

  • @abhishekmathur221
    @abhishekmathur221 27 дней назад

    Bahut acche se samjhaya bhai aapne

  • @bipinmsit7380
    @bipinmsit7380 2 года назад

    Hiii Akshay, because of you only I jumped into WebGIS from GIS Domain. You are such a savior man! Keep it up and help me to become master in JavaScript. Huge respect from my side!

  • @jvandco30
    @jvandco30 Год назад

    VERY VERY THANK YOU brother for sharing such a very useful video lesson...

  • @akshhatsrivastava1972
    @akshhatsrivastava1972 3 года назад +1

    This is a great explanation! Thank you so much for this video. This video cleared all of my doubts about event propagation in JavaScript.

  • @atulmishra8753
    @atulmishra8753 4 года назад

    sooper bhai..... U have made it piece of cake to understand these things

  • @vinothkumarv9722
    @vinothkumarv9722 4 года назад

    Wow...
    Akshay....your are great person amazing silent explanation awesome bro i got methode..

  • @yadavmunna9801
    @yadavmunna9801 Месяц назад

    i am right place to learn JS , so in think aur kya hi chahiye jivan best explanation thank you bhaiya

  • @RaviNagarjuna778
    @RaviNagarjuna778 3 года назад +1

    This explanation really helped me in answering one of my interview questions in a more detailed way! Thanks Akshay. More power to you

  • @sandeshth466
    @sandeshth466 3 года назад +1

    Wow Thanks a lot Sir.
    Very informative, we do not get these information directly
    Crystal clear

    • @sandeshth466
      @sandeshth466 3 года назад

      I have a request
      Please do these kind of videos on Angular as well

  • @Kellworkie
    @Kellworkie 5 лет назад +4

    Thank you so much! Literally helped me debug my code. You are a life saver lol

  • @AbhishekSharma-ss2vl
    @AbhishekSharma-ss2vl 2 года назад

    Thanks for this simple and thorough explanation

  • @akashsingh-ch5xc
    @akashsingh-ch5xc 4 года назад +1

    Simply AWESOME explanation.
    What a great job you are doing!!.
    Liked your knowledge and ability to simplify it for others.
    RESPECT!!

  • @ABHISHEKKUMAR-ld2se
    @ABHISHEKKUMAR-ld2se Год назад

    Bhaiya you are really a gem for us❤❤❤❤

  • @prabu2778
    @prabu2778 4 года назад +2

    I liked before watching

  • @attamjotsingh4474
    @attamjotsingh4474 5 лет назад +1

    Good job brother . Explanation of bubble is awesome. Keep making and attaching videos . Thanks 👍

  • @AbhishekSharma-gz9sv
    @AbhishekSharma-gz9sv 5 лет назад +1

    Complicated topic explained so easily.

  • @balasubramani9310
    @balasubramani9310 2 года назад

    It's very clear.
    Thanks for this session.

  • @syedFAHIM-el1wr
    @syedFAHIM-el1wr Год назад

    Liking your video is as good as giving attendance !

  • @MythicEcho
    @MythicEcho 2 года назад +2

    Great job Akshay, I really admire you 👌🏽
    I wish to be like you one day!
    One extra tip
    Always create a separate named function block and then pass it into addEventListener,
    cause if you want to remove it later, cause definiton will always be treated differently.
    eg_ ELEMENT.removeEventListener("click", functionName)

  • @bhumikasingh4419
    @bhumikasingh4419 Год назад

    Wonderfully explained, loved it! You are superb!!Thank you!❤

  • @12vvs
    @12vvs 4 года назад +1

    In easiest way you have covered the concept

  • @Jai-xq5hi
    @Jai-xq5hi Год назад

    Very detailed and simple explanation

  • @vijayashreechodavaram4993
    @vijayashreechodavaram4993 4 года назад +1

    You are truly Amazing!!! The way you explain is awesome!

  • @Mtechcoder
    @Mtechcoder 2 года назад

    Thanks sir for this amazing video i Have deeply understand both of them.

  • @SuperSantosh777
    @SuperSantosh777 3 года назад +1

    Nicely explained, hats off to you!! You are really brilliant at teaching.

  • @ShubhamSharma-io3tt
    @ShubhamSharma-io3tt 3 года назад

    Amazing video, sir! you clearly meant it when you promised that the viewers wouldn't have to consult any other video for this concept. Thanks a lot

  • @rushabhmandvekar4411
    @rushabhmandvekar4411 3 года назад

    You nailed it bro...First time i thought if i can hit this vdo as many like as i can. Waiting for new video of namaste javascript series. Keep it up🙌🙌❤️

  • @soni.himansh
    @soni.himansh Год назад

    Best explaination.Thanks Akshay

  • @ScienceSeekho
    @ScienceSeekho 2 года назад

    Great Video. Now bubbling and capturing is easy peesy

  • @savarisagayadevans9185
    @savarisagayadevans9185 2 года назад

    another awesome one.
    you simplified the event bubbling and capturing concept. ~thanks

  • @atwinedan9364
    @atwinedan9364 2 года назад

    Best explanation, thanks Akshay Sain

  • @ranjitshah7563
    @ranjitshah7563 2 года назад

    Hey Akshay, Thank you so much for sharing your information. That was really help for me.

  • @krishnakantdadhich856
    @krishnakantdadhich856 3 года назад

    Hi Akshay , your videos are really helpful there is more clarity in the content you provide but I know u might be busy at your work but please keep posting videos continuing because I just wait for this. Thanks

  • @suryapratap9915
    @suryapratap9915 5 лет назад +4

    one of the best explanation , thanks a lot, pressed the bell icon :D

  • @codingWithJS8
    @codingWithJS8 Год назад

    Sir you are just inspiration for us .. thank for sharing your experience

  • @surendrachaudhary2936
    @surendrachaudhary2936 2 года назад

    thanks for the crystal clear explanation ,it will be super helpful if you provide brief explanation at last in the video like you provide in closure

  • @niharikasrivastava5601
    @niharikasrivastava5601 3 года назад

    Your video helped in a better understanding and clearer explanation. Thank you :)

  • @shantanupatwardhan5816
    @shantanupatwardhan5816 2 года назад

    Superbly explained

  • @adityadubey5204
    @adityadubey5204 2 года назад

    amazing explanation akshay you'r the bestttt :)

  • @teji644
    @teji644 3 года назад

    Recently I found this question in my semester exam model paper🤦🏻‍♂️ ..
    Now I got the concept cleared 👍
    THANKS BROO

  • @shikhatiwari6865
    @shikhatiwari6865 3 года назад

    Sir i really liked your video the way u explained.. Thanku so much and God bless u

  • @yashpreet2707
    @yashpreet2707 5 месяцев назад

    Amazing video lecture, thankyou sir

  • @confusedLadka
    @confusedLadka 5 лет назад

    Great Vlog .... I am learning major things from these videos... Thankyou ... Keep doing good job..

  • @waqasrana5734
    @waqasrana5734 2 года назад

    So clear
    love from Pakistan
    thank you so much bhai

  • @rachanakotha6059
    @rachanakotha6059 4 года назад +15

    Thank you Akshay for such a clear explanation of the concept. Great ♥️ for that. It's really beneficial to beginners like me. And a small question..
    Can you please mention the practical use case where we need this.
    (Please do pin the answer so that it will be helpful for the people having the same question.)

  • @naimurrahman9979
    @naimurrahman9979 3 года назад

    Very well understandable video... I am very clear about this topic now, thank you

  • @TusharBorawake
    @TusharBorawake 5 лет назад +1

    Nicely explained Akshay..Thanks..Keep it up.

  • @tejasmalani9309
    @tejasmalani9309 4 года назад

    please also give example where that concept use , ur explaination of concept is really good .

  • @Gamer_with_knowledge
    @Gamer_with_knowledge Год назад

    Thank you so much for every video Akshay ❣

  • @a_maxed_out_handle_of_30_chars
    @a_maxed_out_handle_of_30_chars Год назад +1

    simple and to the point, thank you :)

  • @smritisharan-sfdcamplified
    @smritisharan-sfdcamplified 4 года назад +1

    very good explanation

  • @nostacktofullstack
    @nostacktofullstack 4 года назад

    You have a great content , keep it up. Never thought these topics has a great impact.

  • @PritamSingh-lv2cd
    @PritamSingh-lv2cd 3 года назад

    Your really are a great teacher 👍