Category:

Tutorial

Duration: 17:36

6,803 views

134

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
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -