Main content
Computer programming
Course: Computer programming > 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
DOM event types
The browser triggers many events. A full list is available in MDN, but here are some of the most common event types and event names:
- mouse events (
MouseEvent
): mousedown, mouseup, click, dblclick, mousemove, mouseover, mousewheel, mouseout, contextmenu - touch events (
TouchEvent
): touchstart, touchmove, touchend, touchcancel - keyboard events (
KeyboardEvent
): keydown, keypress, keyup - form events: focus, blur, change, submit
- window events: scroll, resize, hashchange, load, unload
You might be wondering when to use touch events versus mouse events, since they're so similar.
Touch events are only triggered on touch-enabled devices like smartphones and touch-screen laptops. Mouse events like
click
and mousemove
are triggered on the majority of browsers and devices. However, in most smartphones, the mouseover
event isn't triggered at all, because they can't detect a finger hovering over the phone. Some smartphones are adding sensors for that though, so more smartphones will detect mouseover
in the future. In most cases, you'll want to listen to mouse events instead of touch events, because those are the most universal.
Want to join the conversation?
- Why can't we use jQuery in our webpages?(4 votes)
- You can. I personally believe it is good to know the JS behind JQuery.(33 votes)
- How the library mentioned at the last paragraph (FastClick) or other, like the ProcessingJS at the JavaScript, is added to the programation? Here at Khan Academy, this happens automatically, so I've been thinking, can it be used at another site, just adding it in the code with some element of the language?(5 votes)
- You can find most of these libraries on a CDN such as CDNJS (http://cdnjs.com/libraries/fastclick). Once you know the URL of the hosted JavaScript file, all you need to do is import it with a
<script>
tag and it's ready to use.<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
(9 votes)
- Instead, could you just use the mouse functions like, mouseClicked or MouseOver. Maybe we could say:
mouseClicked = function() {
var text = document.getElementById("content");
text.textContent = "hi";
};(6 votes)- That syntax will only work in the ProcessingJS library. The main reason we don't use it for the DOM is because there could be multiple objects with an event. In the case you are talking about, there is only the canvas. But a webpage can have many objects each with their own events. The video already showed this, but here is some event code:
var text = document.getElementById("content");
text.addEventListener("click", function() {
text.textContent = "Hi!";
});
Good luck and happy coding!(7 votes)
- Can a touch event be triggered by a laptop with a trackpad?(3 votes)
- No, As far as I know..
Because the TrackPad/TouchPad is actually a (mouse) according to the system..
So whatever applies to the mouse, its also applies to the Track/TouchPad (vise versa).(7 votes)
- So, I'm working on a fake website outside of Khan Academy, and I need to know how to trigger the same click function for several different links that all have a class of "blank". Please help me!(4 votes)
- This is probably a question I should have asked a while ago, but why can't we use some of the (in my opinion) better looking and space-saving arrow functions in our code?
var function = ()=>{return 'foo'}
orfoo.addEventListener('click', ()=>{baz.innerHTML='something'})
(4 votes) - how can I see if someone is pressing the enter key?(2 votes)
- You would add an event listener to a node (in this case,
window
) and tell it to listen for thekeydown
event. Then, when the key is pressed, check if thekey
property of the event object is equal to"Enter"
. Look:window.addEventListener("keydown", function(e) {
if(e.key === "Enter") {
alert("Enter was pressed!");
}
});(5 votes)
- What does JS consider a double-click? Is there an amount of time between clicks that qualifies two clicks together as a double click?(2 votes)
- Yep.
And a click is a mouse-press followed by a mouse-release.
So a double click is a mouse-press, mouse-release, mouse-press and another mouse-release. All within a small timespan.
That timespan is determined by the operating system.
On Windows, I think that timespan is 0.5 seconds, but it's configurable.(3 votes)
- Hi.
Is there any way to pass a parameter into a function used in addEventListener? I have an array of objects and need to loop through them all and apply a function to each one, if clicked, but I need to pass in their index so they can each have a unique effect.var inpts = document.getElementsByClassName("login-input");
function onInptHover() {
inpts[i].value = null;
}
for(var i = 0; i < inpts.length; i++) {
inpts[i].addEventListener("click", onInptHover);
}(1 vote)- I've run into this frustrating issue before and there are a couple of solutions I'll frequently use.
In this case, it's probably best to re-index the element. Something like this should work:for(var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener("click", function() {
var thisInput = this;//get the element which the event listener is occurring on
}
}
UsethisInput
to manipulate the input clicked. If you wish to manipulate the parent element, you can usethis.parentElement
. From there, you can also access the other inputs in the parent element as needed.(4 votes)
- am stuck on level 2 in the previous challenge,how do i change the inner text of the "cat-chat" div to say Meow? I need help(2 votes)
- either .textContent= //string here or .innerHTML = //string here(1 vote)