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

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?

  • leafers ultimate style avatar for user shepgoba
    Why can't we use jQuery in our webpages?
    (4 votes)
    Default Khan Academy avatar avatar for user
  • duskpin ultimate style avatar for user Richard dos Santos
    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)
    Default Khan Academy avatar avatar for user
  • piceratops sapling style avatar for user Samuel  Silva
    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)
    Default Khan Academy avatar avatar for user
    • old spice man blue style avatar for user Flostin(READ BIO)
      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)
  • piceratops tree style avatar for user zeraph.moore
    Can a touch event be triggered by a laptop with a trackpad?
    (3 votes)
    Default Khan Academy avatar avatar for user
  • duskpin ultimate style avatar for user William Dever
    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)
    Default Khan Academy avatar avatar for user
  • piceratops ultimate style avatar for user Jonathan Waters
    how can I see if someone is pressing the enter key?
    (2 votes)
    Default Khan Academy avatar avatar for user
    • duskpin tree style avatar for user budster the dingo
      You would add an event listener to a node (in this case, window) and tell it to listen for the keydown event. Then, when the key is pressed, check if the key 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)
  • blobby green style avatar for user virtuos2
    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)
    Default Khan Academy avatar avatar for user
    • leaf grey style avatar for user Quinn Hardbrook
      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
      }
      }


      Use thisInput to manipulate the input clicked. If you wish to manipulate the parent element, you can use this.parentElement. From there, you can also access the other inputs in the parent element as needed.
      (5 votes)
  • leaf orange style avatar for user Dominic R.
    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)
    Default Khan Academy avatar avatar for user
    • spunky sam blue style avatar for user Dalendrion
      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)
  • female robot ada style avatar for user Opio Paul
    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)
    Default Khan Academy avatar avatar for user
  • aqualine ultimate style avatar for user PeterEHorton
    In the previous challenge part this works:
    var catEl = document.getElementById("cat-pic");
    var onCatClick = function(){
    document.getElementById("cat-chat").textContent = "Meoww";
    };
    why doesnt wont this work:
    var catEl = document.getElementById("cat-pic");
    var onCatClick = function(){
    catEl.textContent="Meow";
    };
    in the example prior to the challenge:
    var clickerButton = document.getElementById("clicker");
    var onButtonClick = function() {
    clickerButton.textContent = "Oh wow, you clicked me!";
    };
    works.
    So why is it different in the challenge?
    (1 vote)
    Default Khan Academy avatar avatar for user