An Introduction to JavaScript Event Listeners for Web Designers

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[rwingender]

I love the pace. Not too fast, not too slow. I love that you don't rush through your on-screen actions - most instructors are more interested in getting through the material as fast as possible, as opposed to going through it slow enough so that students can follow what they're doing and actually absorb it. I also like that you do not have any distracting background noise. Nice and calm.

[chiaravicary]

Using EventListeners - How would you than select just one button (as in the third, fourth, or even last one). By my understanding, the first way, by default, selects the first button. Otherwise you selected all.

[robertschmidt]

What web site/url are You referring to at 3:21? I've look to look at it, but can't find it.

[fatemanargischowdhurydia]

Dear sir,
you did not use .visible class in html under section element.So, how it is working here, I dont understand.

[NedumEze]

Thank you so much for this. I have a related challenge. May I share it with you? Maybe, you would help me.

[iamcaviar]

Hello, if you follow the tutorial in this video, it just wouldn't work. Check out the article link in the description for the correct method. But thanks for the video tho <3