An Introduction to JavaScript Event Listeners for Web Designers

Video Description

Learn how to make your websites more interactive by using JavaScript event listeners. Mastering event listeners will help you take your web design projects to the next level. ► Download Unlimited Photos, Fonts & Web Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_qsEtXR38IQ8&utm_medium=referral&utm_source=youtube.com&utm_content=description If you’re a web designer who’s yet to step into the world of JavaScript, or you’re just starting in front-end development, this video is the perfect way to begin. It will explain a couple of really useful concepts, very easily, which you’ll be able to use right away and will get you out of the JavaScript starting blocks. Event listeners are among the most frequently used JavaScript structures in web design. They allow us to add interactive functionality to HTML elements by “listening” to different events that take place on the page, such as when the user clicks a button, presses a key, or when an element loads. When an event happens, we can execute something. The most common events you might “listen out for” are load, click, touchstart, mouseover, keydown. You can check out all the DOM events in MDN's Event Reference guide. By following this guide, you’ll learn how to create a JavaScript event listener in three different ways: • HTML’s global onevent attributes • jQuery’s event method • The DOM API’s addEventListener() method Finally, we’ll have look at how to create a basic reveal-hide functionality using a click event listener. ► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_qsEtXR38IQ8&utm_medium=referral&utm_source=youtube.com&utm_content=description Read more about JavaScript event listeners on Envato Tuts+: https://webdesign.tutsplus.com/tutorials/introduction-to-javascript-event-listeners--cms-35236?utm_campaign=yt_tutsplus_qsEtXR38IQ8&utm_medium=referral&utm_source=youtube.com&utm_content=description - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Envato Tuts+ Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_qsEtXR38IQ8&utm_medium=referral&utm_source=youtube.com&utm_content=description Envato Elements All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes. ► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_qsEtXR38IQ8&utm_medium=referral&utm_source=youtube.com&utm_content=description ► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus ► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus ► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -