If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Making webpages interactive with events

JavaScript can modify the Document Object Model (DOM) of a webpage in response to user events, like clicks or key presses. This allows for things like interactive slideshows, games, form validation, and infinitely-loading galleries. Event listener functions enable us to wait for a specific event to occur and then execute some code in response.

Want to join the conversation?

Video transcript

Now you all know how to access and modify the DOM of your webpages. And you can do that for hours on end. But why would you do that when you could just start the webpage off with the HTML that you wanted? Because now you can do all of that in response to user events. And that is what makes JavaScript on webpages so powerful. For example, you could create interactive slideshows by responding when the user clicks a button. You could create games of all sorts, responding when the user presses keys or moves their mouse to aim a bird. You can process forms and validate user input, responding when the user types in the form. You could create infinitely-loading galleries, responding whenever the user scrolls the page. All of that is possible by listening to events in your webpage. The user will do some action, like click a button. The browser then fires-- or triggers-- the click event on that button, and your code already has a listener function set up for that event, so the browser then calls your listener function, which is some bit of JavaScript that you want to happen in response. That's the basic gist of how it works, and now I'm going to show you how to actually code it in your webpage.