Hey, welcome! If you\u2019re just dipping your toes into JavaScript, you\u2019ve probably heard about \u201cevents\u201d and wondered what they are. Don\u2019t worry I\u2019ve got you covered! Events are like little moments that happen on a webpage, like when someone clicks a button or types something. They\u2019re what make websites feel alive and fun to use. In this post, I\u2019ll walk you through what events are, show you the most common ones, and toss in some examples that\u2019ll make you go, \u201cOh, I get it now!\u201d Let\u2019s jump in I promise it\u2019ll be easy and kinda fun.<\/p>\n\n\n\n
Imagine you\u2019re on a website, and you click a button. That click? That\u2019s an event! Events are just things that happen stuff like clicking, typing, or even scrolling. JavaScript listens for these moments and lets you do something cool when they happen. For example, maybe you want to say \u201cHi!\u201d in the console when someone clicks something. Events make that possible, and they\u2019re honestly one of my favorite parts of coding because they bring everything to life.<\/p>\n\n\n\n
document.addEventListener('keydown', function(event) {\n console.log('You pressed: ' + event.key);\n});<\/code><\/pre>\n\n\n\nWindow Events<\/h2>\n\n\n\n\n- load<\/strong> \u2013 When the page is all done loading.<\/li>\n\n\n\n
- resize<\/strong> \u2013 When you make the window bigger or smaller.<\/li>\n\n\n\n
- scroll<\/strong> \u2013 When you scroll up or down.<\/li>\n\n\n\n
- unload<\/strong> \u2013 When you close the page or leave it.<\/li>\n<\/ul>\n\n\n\n
A Window Example<\/h2>\n\n\n\nwindow.addEventListener('load', function() {\n console.log('Yay, the page is ready!');\n});<\/code><\/pre>\n\n\n\nThis runs when the page is fully loaded, and it\u2019s such a relief to see \u201cYay, the page is ready!\u201d pop up it\u2019s like a little high-five from your code.<\/p>\n\n\n\n
Form Events<\/h2>\n\n\n\n\n- submit<\/strong> \u2013 When you send a form (like clicking \u201csubmit\u201d).<\/li>\n\n\n\n
- change<\/strong> \u2013 When you tweak an input and click away.<\/li>\n\n\n\n
- focus<\/strong> \u2013 When you click into a text box.<\/li>\n\n\n\n
- blur<\/strong> \u2013 When you click out of it.<\/li>\n\n\n\n
- input<\/strong> \u2013 When you type or change something in a field.<\/li>\n<\/ul>\n\n\n\n
A Form Example That\u2019s Super Handy<\/h2>\n\n\n\ndocument.getElementById('myInput').addEventListener('input', function(event) {\n console.log('You\u2019re typing: ' + event.target.value);\n});\n\ndocument.getElementById('myForm').addEventListener('submit', function(event) {\n event.preventDefault(); \/\/ Keeps the page from refreshing\n console.log('Form sent nice one!');\n});<\/code><\/pre>\n\n\n\nHere, the input part logs whatever you type into a field (id myInput) as you go like a live update. The submit part catches when you send a form (id myForm) and says \u201cForm sent nice one!\u201d without reloading the page. That preventDefault() trick took me a while to figure out, but it\u2019s a lifesaver.<\/p>\n\n\n\n
Why I Love Events<\/h2>\n\n\n\n
Events are what make websites feel like they\u2019re responding to you. They\u2019re like little conversations between the user and the page. When I first started, I\u2019d click a button, see my message pop up, and think, \u201cWow, I did that!\u201d It\u2019s such a rush to see your code work.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
If you\u2019re new to this, don\u2019t try to learn every event at once it\u2019s too much! Start with something simple, like click or input, and play around. Maybe make a button that says \u201cHello!\u201d when you click it. Little wins like that keep you going. Oh, and if something doesn\u2019t work, don\u2019t sweat it I\u2019ve spent hours fixing tiny typos, and it happens to everyone.<\/p>\n\n\n\n
So, that\u2019s the scoop on JavaScript events! They\u2019re your ticket to making websites interactive and awesome. Give these examples a try, tweak them, and see what happens. Let me know how it goes I\u2019d love to hear about your coding adventures! Happy tinkering!<\/p>\n","protected":false},"excerpt":{"rendered":"