Main content
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
© 2024 Khan AcademyTerms of usePrivacy PolicyCookie Notice
Summary: DOM events
Adding event listeners
To make sure that the browser calls a particular function when an event happens on an element, you must use
document.addEventListener:var buttonEl = document.getElementById("clicker");
var onButtonClick = function() {
console.log("Oh golly gosh, you clicked me");
};
buttonEl.addEventListener("click", onButtonClick);You can pass many valid strings as the first argument, see the event types article.
If you want information about the event that happened, you can look at the event object that the browser passes to your callback function:
var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
console.log("You clicked " + e.clientX + " , " + e.clientY);
};
faceEl.addEventListener("click", onFaceClick);There are many properties on the event object, you can see a full list here.
If you are overriding click behavior on a link or submit behavior on a form, you may want to call
event.preventDefault() to prevent the browser's default behavior.Removing event listeners
If you no longer need a particular event listener, you can remove it using
removeEventListener:var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
console.log("You clicked " + e.clientX + " , " + e.clientY);
};
faceEl.addEventListener("click", onFaceClick);
// later...
faceEl.removeEventListener("click", onFaceClick);Want to join the conversation?
What programming languages do you know, Pamela?
Do you know if Khan Academy will teach jQuery or C++ any time soon.(34 votes)
there is Python, Java, too. You can find some videos of them on youtube(14 votes)
"There are many properties on the event object, you can see a a full list here." thought I would see a list that includes clientX and clientY here. What is this list and what am I missing?(11 votes)
The linked web page only lists the properties that ALL types of events have. The list up the top is specific types of events - if you go to check out "MouseEvent" you'll find the clientX and clientY properties there.
It wouldn't make sense to have a clientX and clientY on a event to tell you the page had loaded, that there had been an error, or the previous window had been closed, for example - they only show up for events that it makes sense for.(12 votes)
I'm stuck in the Pet The Cat challenge, where click on cat-pic causing you see "meow"
What logic is missing?
var cat = document.getElementById("cat-pic")
var chat = document.getElementById("cat-chat")
var onCatClick = function(){
chat.textContent = "meeow";
cat.addEventListener("click", onCatClick);
};
Sometimes resolving a problem requires help from others....Thanks in advance!(3 votes)
The event listener is never added becauseonCatClickis never called. Movecat.addEventListener("click", onCatClick);ouside of theonCatClickfunction.(18 votes)
- A general HTML/JS question:
I have a variable, 'counter = 600'. I also have four buttons. I can change the value of 'counter' to 500, 600, 650, and 700 by clicking the buttons.
I want the current value of 'counter' to be displayed on my webpage. I used 'document.write' to display it, however, when I click the buttons, although 'counter' is set to the new value, the displayed number does not. I believe it is because the 'document.write' is only called once and does not check to see if 'counter' has changed. Is there anything I can do to get the 'document.write' to update to the new value?(4 votes)
I would put it in a listener function that activates when any of the four buttons are pressed, so that it displays the value of 'counter' each time a button is pressed.(1 vote)
Is anyone else finding that the "Onwards" button isn't popping up on the "Processing forms with events" and "Preventing default behavior of events" once you finish the videos? I'm watching the videos straight through. I enjoy seeing my progress recorded and I'm feeling frustrated that my achievements won't record.(3 votes)
That sometimes happens to me. I just do a hard reload.(2 votes)
Very big question, very confusing problem. Would love some help on this one!
I want to make it easy to call any id from a large selection with only a few commands. Here's what I have so far.
I am making an array of objects for my computer build. Each part has a name, a div, a button, and an input, all of which have their own id. This way I can treat each part as it's own "button/input/text box" combo. Here's my (kind of large) array of objects:
var partBoxIds = [
{name: "CPU", div: "cpu-div", button: "cpu-button", input: "cpu-input"},
{name: "Motherboard", div: "motherboard-div", button: "motherboard-button", input: "motherboard-input"},
{name: "RAM", div: "ram-div", button: "ram-button", input: "ram-input"},
{name: "Graphics Card", div: "gpu-div", button: "gpu-button", input: "gpu-input"},
{name: "Storage SSD/HDD", div: "ssd-div", button: "ssd-button", input: "ssd-input"},
{name: "Power Supply", div: "power-div", button: "power-button", input: "power-input"},
{name: "Cooling System", div: "cold-div", button: "cold-button", input: "cold-input"},
{name: "Computer Case", div: "case-div", button: "case-button", input: "case-input"},
{name: "Tips/things to know", div: "tips-div", button: "tips-button", input: "tips-input"}
];
I wanted to create 3 variables for each part that stores the specific element (div, button, and input). I also want the variable name to be some variation of the part name as well (similar to the id's).
I created a constructor function that allows me to input the array index and propertyName.
var elementFinder = function(index, propertyName){
this.index = index;
this.propertyName = propertyName;
};
Then I made a prototype that finds the id of the given properties.
elementFinder.prototype.find = function(){
document.getElementById(partBoxIds[index].propertyName);
};
Now, for the question.
Is it possible to use a nested for loop to create all the variables for me in such a way that they have distinguished and predictable names, as well as changing this.index and this.propertyName values without running into trouble?
I have tried this out
for (var i = 0; i < 9; i ++){
for (var j = 1; j < 4; j++){
var partBoxes[i].name = new elementFinder(i, j);
console.log(partBoxIds[i].names);
}
};
I know it would try to create three variables with the same name if it actually worked, but it won't let me make a square bracket [] inside a variable name. Is it even possible to make something like this work?(3 votes)
i had a problem with mad libs challenge it said i needed to use longer words? why do i have to use longer word to progress through the challenge(1 vote)- If you used an abbreviated version of the "noun", "adjective", and "Someone's Name", you should use the full name as shown in quotations, this may help the program understand the variables a little more.(2 votes)
I still don't understand much.
What should I do?(1 vote)
Have you done the Intro To JS and HTML/CSS courses?(3 votes)
How can I use class names instead of ids to apply the event listener to multiple elements? For example, I want to make something similar to the Cat Clicker challenge but with many images, so that text appears each time one of the images is hovered on.(1 vote)
Instead of using document.getElementById('id); you could use document.getElementsByClassName('class');(2 votes)
How would I make a button go to another page?(1 vote)
Check out Gray Wolf's button and scenes tutorial.
https://www.khanacademy.org/computer-programming/scenes-and-buttons-how-to/5381277884956672(2 votes)