Main content
Computer programming - JavaScript and the web
Course: Computer programming - JavaScript and the web > Unit 6
Lesson 5: DOM events- Making webpages interactive with events
- Adding an event listener
- Challenge: Cat Clicker
- DOM event types
- Using the event properties
- Challenge: Cat-stache
- Processing forms with events
- Challenge: Mad Libs
- Preventing default behavior of events
- Summary: DOM events
© 2023 Khan AcademyTerms of usePrivacy PolicyCookie Notice
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?
Even though Jquery is part of JavaScript, wouldn't it be more helpful to use Jquery than to use this type of JS?(6 votes)
JQuery can simplify this, but it is nice to know how to do it from the original functionality.(24 votes)
Hi I was just wondering if in this class we would be learning how to create multiple page websites with navigation bars like Khan Academy or most other sites.(7 votes)
You already know enough to do that. Put each page in a separate HTML file and make links between them. Navigation bars are simply styled<div>tags with links in them.(7 votes)
If you can make games with HTML and javascript, why doesnt anyone here on khanacademy do it?(1 vote)
Some of my games:
https://www.khanacademy.org/computer-programming/1k-zx-chess/5511065696075776
https://www.khanacademy.org/computer-programming/swat-mcfly/1092685940
https://www.khanacademy.org/computer-programming/kalah/1501023989
https://www.khanacademy.org/computer-programming/towers-of-hanoi-puzzle/1333935232(3 votes)
- How can you make multple pages? Click a button and there is a new page(1 vote)
- You just make many pages and use links to open the others.(2 votes)
Will there be HTML5 game tutorials soon?(4 votes)- Some people (like the number one base 12 proponent) have already made games using HTML. It is just much easier to use Processing JS(0 votes)
How do I make my code check values on an array variable to see if any of them match an inputted value, and do something based on whether or not any of them match the inputted value?(1 vote)
You could use a for loop:for (var i = 0, len = array.length; i < len; ++i) {
if (array[i] === value) {
// Do thing
break;
}
}
More simply, though, is:if (array.includes(value) {
// Do something
}(2 votes)
Is there any possible way that you can make a python course bc like I already mastered HTML, CSS and Javascript but like I haven't rlly been able to release my awesome python projects...(1 vote)- Khan Academy's objective is to teach the basics of programming, not to teach proficiency in a particular programming language. The concepts that you have learned in the JS apply to Python.
KA previously offered a Python course. The videos can be found on the KA YouTube channel. Be aware that these lessons are for an outdated version of Python.(1 vote)
- I want to change the text inside the button, when the button is clicked (this function works) and get the previous text back, when the button is pressed the second time.
let bttn = document.querySelector('button')
if(bttn.textContent = 'Boring button') {
let click = () => {
bttn.textContent = 'Wooow'
}
bttn.addEventListener('click', click)
}
else {
let clickk = () => {
bttn.textContent = 'Boring button'
}
bttn.addEventListener('click', clickk)
}(1 vote) 
How to we put programs we made on KhanAcademy on our webpages, like that Angry Birds Game?(1 vote)- Go to one of your projects and click the button that says share. (It is beside the delete and settings buttons)
You can copy the code to imbed the program in a webpage. I would suggest hiding th editor, buttons, etc.(1 vote)
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.