Event Listeners in JavaScript | JavaScript Events Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 พ.ย. 2024

ความคิดเห็น • 56

  • @9nikolov
    @9nikolov 7 หลายเดือนก่อน +3

    When the "classList, add, remove and toggle" section of the video came up, I started to feel like a kid in a candy store, where everything is free.
    This is so exciting I can't wait to finish this JS course, then the React course and finally turn my web design ecommerce store into a reality. That will be the biggest project on my portfolio and I will utilize it to help me land a position as a frontend intern.
    Thank you so much for your videos Dave, I know I've said it a lot of times already, but you are truly a blessing for the web development community, your courses are accessible, of high quality, perfectly ordered and structured and well paced.

  • @marcusl.5785
    @marcusl.5785 2 ปีที่แล้ว +5

    Dave, your content is highly organised, thorough, and easily digestible. I've decided to use your content as a primary source of learning, so, thanks for all your work. I predict your channel to blow up to 50k-100k subscribers within the 2022 year - I'm saying it now! What I find most appealing on your channel is not only your clear, methodical instruction, but the highly accessible/organised catalogue of content on your channel page. If I need to find instruction on a particular topic, it's not hard to find. Take care all the best.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 ปีที่แล้ว +1

      Thank you, Marcus! I sincerely appreciate the kind words and prediction 🙏💯🚀

  • @VanPetersonKpoti
    @VanPetersonKpoti ปีที่แล้ว

    I'm at a loss for words to express my gratitude for all the effort that has gone into bringing us this kind of exceptional, high-quality content.
    I've decided to follow the Full-Stack course with you.
    You have mastered your work.
    Thank you very much Mr. Dave.
    Your student from Togo (West Africa).

  • @dansmar_2414
    @dansmar_2414 2 ปีที่แล้ว +5

    Besides the great video you've made, the links in the description also play a huge role. Congrats and thank you so much for creating such content

  • @Grihlo
    @Grihlo 2 ปีที่แล้ว +1

    I'm really happy that I've found your channel. Thank you for sharing your knowledges!

  • @bama2619
    @bama2619 10 หลายเดือนก่อน

    Thank you, Dave! Good job. Still valuable after 3 years. Did not know that you had github link to your css in the description. I trained with my css version and it worked out.

  • @davidbugatti2159
    @davidbugatti2159 3 ปีที่แล้ว +2

    You explain it really well, ty

  • @SonOfPhoenicia
    @SonOfPhoenicia ปีที่แล้ว

    7 more tutorials to go :p Thanks Dave!

  • @CondeAlberto
    @CondeAlberto 2 ปีที่แล้ว

    I agree with Dan below, the links you provide are golden. I learned some Sass as well in this video.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 ปีที่แล้ว +1

      Thank you, Alberto! The traditional academic in me insists on the references 😀

  • @jasminvillatoro162
    @jasminvillatoro162 2 ปีที่แล้ว

    Thank you soo much! This tutorial has helped me a lot understanding JavaScript better.

  • @edwilsondasilva9946
    @edwilsondasilva9946 2 ปีที่แล้ว

    Hi, your videos are awesome! Continue please.

  • @richardmonne7212
    @richardmonne7212 3 ปีที่แล้ว

    So understandable!!! very comprehensive! Thanks a lot man! God bless you!!!!!!

  • @Antonio_shortz
    @Antonio_shortz 3 ปีที่แล้ว +1

    Thanks for making this video. I'm still a bit stuck but have a better understanding

  • @mostafasalaheldin812
    @mostafasalaheldin812 3 ปีที่แล้ว

    Thanks for the hard work

  • @AbhishekYadav-g4h
    @AbhishekYadav-g4h ปีที่แล้ว

    Around 18:00, while changing useCapture true or false, iI think the events change outwards only in both the cases from h2 to section.
    like while useCapture is true in all three (view, div, h2) -> events changes from h2 to section, i.e. outwards.
    you referred it should be inwards.

  • @saeed7996
    @saeed7996 3 ปีที่แล้ว

    TOTALLY AWESOME VIDEO!!! Top-quality! It's my first time on your channel, and I'm so impressed, you explain everything so clearly and beautifully, Thank you so much!

  • @__zenon
    @__zenon ปีที่แล้ว

    Hey Dave, you seem to prefer using arrow functions? Is there a reason for that and is there a difference to using the other ways of writing a function? Thanks.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  ปีที่แล้ว +1

      Arrow functions are considered function expressions. I do like arrow functions. It is good to know both. Lately, when working with Next.js, I have found myself writing more traditional functions with the function keyword again.

  • @redMaple_QC
    @redMaple_QC ปีที่แล้ว +1

    This one is a little confusing. Codes don't match your result. I get view1 while you start on view2.

  • @laudlogo7057
    @laudlogo7057 2 ปีที่แล้ว

    The source codes files are not what is exactly in the video.
    That said it is a very good beginners series.
    I wondering which projects to try out after this the series, i really want to practice this.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 ปีที่แล้ว

      Thank you, Laud! I have a few projects on my channel for Vanilla JS. 💯

  • @jiweihe3413
    @jiweihe3413 2 ปีที่แล้ว

    Your videos are great! For beginners like me to follow. Does the event propagation only work if click is on the innermost element? 16:30

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 ปีที่แล้ว +1

      It needs to be a child to bubble up for example but it does not have to be the innermost child element.

  • @dannyvista533
    @dannyvista533 2 ปีที่แล้ว

    Hello Dave, hope all is well. I'm new to Javascript and I'm wondering what does the view.querySelector and div.querySelector means compare to document.querySelector?

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 ปีที่แล้ว +1

      Hi Danny, the tutorial right before this one in my Javascript for Beginners series covers how these selectors are created: th-cam.com/video/WbG86sMd3SU/w-d-xo.html

    • @dannyvista533
      @dannyvista533 2 ปีที่แล้ว

      @@DaveGrayTeachesCode Thank you very much for responding Dave! I got to watch that video to learn more about the DOM. More power to your channel.

  • @noonecares6816
    @noonecares6816 ปีที่แล้ว

    Sorry where did you get document.queryselector("h2 +div") there is no class for h2 and div.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  ปีที่แล้ว

      No class needed. You can select HTML elements, too. Any selector you might use in CSS could be a selector here.

    • @noonecares6816
      @noonecares6816 ปีที่แล้ว

      @@DaveGrayTeachesCode Understood, thanks.

  • @bnmbnm7278
    @bnmbnm7278 2 ปีที่แล้ว

    22:09 Can you explain why the h2 background color is purple and the div is also purple? I don't understand
    Because sometimes I can't read the subtitles

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 ปีที่แล้ว +2

      We are attaching event listeners and listening for a click on these elements. When clicked, we are changing the background color. Just after 21:00, we change the target from the view variable to the event.target. This begins on line 17. I really cannot explain the video in the comments as well as simply suggesting to watch the video again. Follow what I do in the code.

  • @omcinc
    @omcinc ปีที่แล้ว

    Hi Dave, I can't seem to load/display "My 2nd View" as seen in the beginning of your tutorial. I copied the source documents and this loads View1. I tried changing css views from flex to none - view1 disappeared, but view 2 does not appear.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  ปีที่แล้ว

      Go back over the video again. I show how to achieve this.

    • @OlaRsk
      @OlaRsk 8 หลายเดือนก่อน

      Which part of the video please ? ​@@DaveGrayTeachesCode

  • @plamenpetkov746
    @plamenpetkov746 3 ปีที่แล้ว

    Is there a repo for this lesson?

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  3 ปีที่แล้ว +1

      No repo for this one. I didn't create many for the beginning JS tutorials. I think it helps students when they type it out themselves. Thanks for asking!

    • @plamenpetkov746
      @plamenpetkov746 3 ปีที่แล้ว

      @@DaveGrayTeachesCode I was just searching for the Scss files since I still don't know it because its little different from the ordinary CSS :D. Thanks :)

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 ปีที่แล้ว +1

      I have created a gist for the HTML - gist.github.com/gitdagray/7d1676f2503c987fe22e2a8c10926426 and a gist for the CSS - gist.github.com/gitdagray/cf6256c62fad399e056d8e7187950c73 . You'll need to change display settings for each example.

    • @Really_riel
      @Really_riel 2 ปีที่แล้ว

      @@DaveGrayTeachesCode these links are not working

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 ปีที่แล้ว

      @@Really_riel they do now. TH-cam was adding the closing ) to the links so I removed the ( ) surrounding the links.

  • @sparshverma1369
    @sparshverma1369 2 ปีที่แล้ว

    Can I get the code of those sass files ?

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 ปีที่แล้ว

      I have created a gist for the HTML (gist.github.com/gitdagray/7d1676f2503c987fe22e2a8c10926426) and a gist for the CSS (gist.github.com/gitdagray/cf6256c62fad399e056d8e7187950c73). You'll need to change display settings for each example.

    • @sparshverma1369
      @sparshverma1369 2 ปีที่แล้ว

      @@DaveGrayTeachesCode Thanks

  • @glen-f7k
    @glen-f7k ปีที่แล้ว

    Please use better sound. Thanks

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  ปีที่แล้ว

      I currently do. Note you made your comment on a video that is over two years old. I have continued to improve over that time.