JavaScript DOM Crash Course - Part 3

In this lesson in the JavaScript DOM, we will be looking at different events and how to attach them to DOM elements with addEventListener();
CODE: Code for this video
www.traversymedia.com/download...
BECOME A PATRON: Show support & get perks!
/ traversymedia
ONE TIME DONATIONS:
www.paypal.me/traversymedia
COURSES & MORE INFO:
www.traversymedia.com
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ traversymedia
NEW DISCORD CHAT SERVER:
/ discord

[@eS_Zett]

00:11 Introduction 00:45 Event Listener Introduction 02:46 .addEventListener() with Click Event 04:59 Event Parameter 05:47 e.target 08:43 e.type 09:10 e.clientX 09:40 e.clientY 10:01 e.offsetX 10:29 e.offsetY 10:54 e.altKey, ctrlKey & shiftKey 12:26 Mouse Events 14:18 dblclick 14:38 mousedown 15:00 mouseup 15:17 mouseenter 17:03 mouseleave 17:19 mouseover & mouseout 19:15 mousemove 23:05 Keyboard & Input Events 24:17 keydown 26:11 keyup 26:34 keypress 26:50 focus & blur 27:34 cut 28:41 paste 28:50 input 29:23 change 31:50 submit

[@tunamusic2314]

thanks bro for assuming

[@OG_CK2018]

Thanks

[@OG_CK2018]

Binod

[@OG_CK2018]

Binod

[@MrTaekbeen]

lovely!

[@seanlangley7467]

Thank you, I do not have money for the study, and your channel is a pearl in this sea with the name of KZbin. Thank you so much, Brad! God bless you! Guys, switch off AdBlock at this channel, please ;)

[@anjalijain2364]

Agree!

[@TKomoski]

@@anjalijain2364 && Totally

[@akshatsethi6384]

Did you get a job yet?

[@mohdyusufkhan8214]

@@akshatsethi6384 asking the real questions...

[@raidoung4100]

lol didnt know there were ads on youtube:P good you said ;d

[@aranguren12]

Brad, you are an incredible person for doing this. I´m currently taking a part-time, semi-remote career on web dev and your courses are helping me compliment a LOT of things that are sometimes left half way. Keep on doing this man, you seriously rock.

[@jojepacana816]

your such an amazing teacher, i love the way you explain, now i can develop by referencing your tutorials and i hope you don't get bored of doing like this just to help us beginners. thanks a lot, god bless

[@Wind_Lamp]

I bought few courses from udemy to learn DOM , but no one has such explanation and teaching ability, finally I found this course on KZbin, thank you very much Sir to share your knowledge , you are great teacher too .

[@sarvinismayilov]

Brad! Thank you for all your great work in this channel! As a starter on this field i find it all well structured to get to the point!

[@soultouchingsongs]

Excellent tutorial on DOM with easy explanation.. You are the best teacher. Thank you.

[@steveburrus9347]

Not the b est teacher at all. U know of Derek Banas?

[@aadiyogini]

@@steveburrus9347 Yes Derek Banas is good but his videos are not like for beginners means he too fast that if anyone is new to programming then he/she won't to be able to grasp that much quickly or won't be able to understand any logic .... Derek banas covers everything but to get started u should watch videos like of Brad Traversy or someone who gives somewhat detailed explanation at the beginning after that anyone should move on to cover nearly all topics from Derek banas bcoz then anyone would be able to make sense out of Derek's videos ........if someone covered ur 20% concepts with understanding n patience initially then with Derek banas videos left 80% concepts can be covered smoothly without getting stuck or confused........otherwise even though his video time length is small still it's gonna take huge time n its gonna waste time.......And yes Brad Traversy is really the best teacher.

[@deskyee]

@@steveburrus9347 nope he's not

[@rs.wright]

Can't express how helpful this series is... Every major tutorial site/channel that teaches JS focuses primarily on the JS algorithms, but teaches nothing about how to actually use it to alter the DOM. Also appreciate the concise yet thorough explanations, there is a lot of info packed in this half hour.

[@divyasampath9500]

Event Listener was quite a deal for me before, this vdo was all that I needed!

[@ironheadmedia1625]

One of the best tutorial video I have ever watched. If you have not watched yet and intend to watch, don't waste any second by waiting

[@bipuljha792]

I've been following you for a while now and I've just noticed that you've reached 2 million followers. Congratulations Brad, you totally deserve this and much more. Cheers!!🍺🍺

[@weightlossmotivation7917]

Thank you so much for this 4 part tutorial it's cleared up so much for me in regards to DOM manipulation with native javascript!

[@RedEyedJedi]

For anyone who hasn't heard of emmet or used emmet, I highly recommend learning about it. It's really not hard and it speeds up writing html a lot. I have banned myself from typing html now, and only type emmet and by doing that, I have managed to pick it up really quickly. Thanks for another brilliant video Brad, you're an awesome teacher.

[@businessyoungsters5503]

dude your tutorials are gem. They Provide A Lot Of Value. Thanks A Lot

[@Haidderispro]

This is the most straightforward dom and JavaScript video I have seen. Thank you

[@Brandon-yy8ey]

This tutorial connected many dots for me. I have been struggling with making burger menus work, but your addEventListener examples have really helped me with this. I created another event function so that "Hello" in the box div would turn on & off with mouseover & mouseout, and the light bulb went off in my head. Thank you, sir!

[@AngaarUriakhil]

Thanks a bunch. Had no clue about DOM before I started this course. Free too. What a time to be alive.

[@Aimopotis]

This is fantastic for me as a new Developer

[@proobld]

The best explanation that i have seen for DOM, thank you.

[@jvjplus]

Changing background based on position was awesome!! 😊

[@bitflipped5337]

I've been learning c and c++ for a year and tried to migrate here, and these are new to me. Thanks for the tutorial

[@katrinalena648]

Great, great thanks, wonderful passionate teacher. Hope to learn online and offline with you soon!

[@satvik1489]

These 4 videos on DOM and its manipulation are very important. Many talented developers were not able to explain this topic while teaching JavaScript but Traversy Media did it very nicely. Thanks a lot 🙌

[@amnashahzadi7608]

What is e in the "onclick" function

[@gilgene5803]

This is really a really great crash course I understand now how to operate better with the DOM events.

[@flamyngoo]

This is very helpful! I did not get bored and the funny things actually made me focus more and learn them easily 🥰

[@ga7853]

Thank you so much for doing this, your efforts are greatly appreciated, and hopefully, soon I will be able to show my appreciation the right way.

[@KerimKaraman28]

Man it's still quite good and understandable in 2021 ! Thanks for the video.

[@swethaaaa]

Love your teaching. It helps me a lot Thanks a ton

[@kunalpandey7189]

thank you, your videos are so much helping me you can't even imagine.very well explained.

[@Spoopers]

I'm in a JS class at school that I paid way too much money for and I just learned more from two hours of your videos than I have in 4 weeks of that class.

[@mz3993]

Thank you Brad for another awesome video!

[@eniolabakare5100]

Still holds good today, thank you Brad!

[@ashenafiteesema9836]

I would like to thank you very much, i have no idea, you are the best of the best teacher, really I haven't any experience of javascript but when I saw your crash course, I have got a lot of knowledge.

[@vincent3542]

up to now, you still the inspirations 😭

[@baciukrystyan6479]

You are a great teacher. Thank you for all videos.

[@ChrisTian-ox5nr]

I appriciate yor hard work Traversy Thank you! So far really enjoying this crash course!

[@suhedaerturk215]

Thank you for the clear explanations! You are the best teacher!!!

[@mervenwedaye5943]

Thanks Brad for this good job, your explanation is very clear and I understand better alla javascript DOM items

[@SheriffKoder9]

I learnt alot of new dom methods and ideas of how to use them from these video series Thank you,

[@samialvi4226]

Now it feels like i have power to manipulate the dom then ever Thanks Brad You have my undying gratitude and respect !

[@javohirmurodov4670]

I have learnt a lot watching your videos , thank you!

[@pascholatti]

great video, helped me a lot on a assignment project I have now!

[@IshanKesharwani]

Nice video Guru. Loved it !!!!!

[@congxiao1989]

thanks to you I gained so much knowledge on DOM and VJS

[@ogbuleo2048]

Thanks for the knowledge you planted into me through this crash course

[@kramyshan8121]

Good work indeed, this video has great value! Thank you and keep it up.

[@singaporestreettravel]

what a fantastic video once again, thanks for sharing no doubt You are a great teacher.

[@nikhilevin]

Thanks for your dedicated and Passionate service!

[@Aserve1st]

Thank you for an amazing lesson. Going on to the last part. =)

[@tomtom5981]

This dude is a natural; thanks, friend...

[@marcelosoares3428]

you are the best! Greetings from Brazil

[@imranshaikh115]

Really very impressive. keep doing this kind of job

[@b.naveenkumar7662]

Your brilliant man I love your teaching and knowledge

[@ariesvelasquez1548]

This should be the style or method of teaching my university do! Thanks Brad!

[@zaireeutar130]

true af

[@ygcjayalal]

awesome lecture forever. Very good, easily understandable a great lessons. thank you so much

[@rajdhanush6775]

best tutor ever seen ... already i bought ur html css udemy course ...

[@user-nc4gs9lz9d]

Very good! I even switched off AdBlock to watch advertising to help this channel )

[@wiskassaquetas123]

Thank you for this video, it's really really useful!

[@MrRoubleh]

thank you so much. You made javaScript look easy

[@kennstack01]

Actually, THIS IS one of my Favorite MENTORS in #Coding ! He has an art_of_Teaching!

[@muhammadabubakarmunir8874]

Excellent lectures related DOM

[@cryptocoinkiwi8272]

This was an excellent tutorial cheers!

[@kasimhasan7623]

Thank you, Brad. It helped a lot.

[@ABHISHEKKUMAR-gp8ls]

very good tutorial for me. Great job BRAD...

[@mtshgaming292]

thank u. u solved my problem in one minute . love u

[@anag2125]

Hi! First of all thank u very much for all the tutos!! I'm even planning to continue with all the Javascript tutorials from your channel :D But this time was thinking on making a suggestion, for other vids, to maybe not give so many examples of things (events in this case) that we may never use and show the ones that we will use for sure instead.. Just a suggestion! Thank u anyways!! Your tutos are helping me a lot and I'm sharing them on Twitter as I watch them! :D

[@tibebetech4867]

Excellent job!

[@nguyenluongtrungk17dn71]

it is really helpful, thank you so much

[@sarahghanei1997]

Thank u, it was very useful.

[@bamelive]

That event parameter at 5:04 helps to understand how the "(req, res)" works on node.js.

[@user-qq6qn6gd9b]

You are so dmn good lecture ever. Thanks you

[@Artificial_Intelligence_AI]

28:20, you just showed me a new way of trolling my friends lol. hey buddy, you messed up the entire site and my computer lol

[@honglinhnguyen96]

Thanks so much, amazinggg tutoriall

[@limitless0032]

Thanks , you are a blessing!

[@adrianoldchannel2494]

Hey Brad great video I was playing around and found if you do Ctrl C it also copy too. Lol. I kinda starting to love JavaScript now.

[@nightcode.]

Great

[@robelseyoum1583]

Brad you are amazing thanks a lot love love

[@Shivsankar-lf8xk]

it is really really just awesome!

[@sessonid5082]

Information overload so many ideas for thangs I can build my boy

[@bogdanmazur3256]

That moment when everthing "just freaking disappeared" really made me laugh for some reason). Thanx for great explanatioins, man

[@MuhammadSaeed-lq4ru]

Amazing Tutorial :)

[@Knowledgeduniya1432]

Thankyou brad sir God bless you ❤️🙏🏻👑

[@tariqabdulghani5337]

Great explanation

[@nightcode.]

Thanks you so much sir❤️

[@generalzeedot]

this should be the most watched video on youtube

[@Cho1279624]

Keep it up!!! Thanks a lot!

[@marciofernandes8454]

@TraversyMedia, thanks for the videos. Is there any EventListener equivalent to jQuery slide. I havent found anything similar. Thanks for the help

[@svilen001]

well put together, easy to grasp. we need more funny moments like RGB background color in these boring youtube tutorials

[@manoranjandash5424]

Greate one Sir..!!

[@ckhinsight]

Hello, another nice tutorial on event handling for JS newcomers. Suggestion: You should use "keyup" instead of "keydown" for updating the innerHTML (since the last alphabet is not inserted in the updated text)

[@Aurora-ku4xr]

Hi, Khai, your suggestion is very much appreciated!!

[@abhisheksunam4869]

Lockdown Diaries Thank you Brad !

[@AmilcarPino]

Thanks for taking the time to do the JavaScript DOM Crash Course simple and useful. Definitely the best of all without a doubt. You are helping a lot of people to achieve their goals. 👍

[@herbertk9266]

Thks for sharing brad

[@taimoor722]

You are making me to get your course

[@tacva2607]

Excellent

[@misharial-essa7407]

Quick question: at 25:54 the letters (key strokes) don't appear immediately. You need to press another key for the previous key stroke to appear in the "output". It looks like the "output" is executed before the "innerHTML". Can you please explain why? or maybe suggest a video that would explain this (in case it requires long elaboration). Thanks a lot and Kudos for the great content!!

[@mohammadnaim9226]

great tutorial...ever

[@sisamkosu2718]

you are the best man

[@ademineshat]

Wao that's the best example for JavaScript "cut the window". Ahhahahhabahahaha. You are the best Brad. Thank you very much

[@sofiapagura1093]

muy buen contenido!

[@k14pc]

thanks, very helpful!!

[@TraversyMedia]

You're welcome. Glad to help