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

What DOM events and properties are there?

Browsers trigger many events. You can use jQuery to add event listeners for any of those events.
A full list of browser events is on MDN, but here are some of the most common event types and names, plus examples of using them:
  • mouse events: 'click' (example), 'mousedown'/'mouseup' (example), 'mousemove' (example), 'mouseenter'/'mouseleave' (example)
  • keyboard events: 'keydown', 'keypress', 'keyup' (example)
  • touch events: 'touchdown', 'touchup', 'touchstart', ‘touchcancel’ (example)
  • drag events: 'dragstart', 'dragend' (Many developers use jQueryUI for drag functionality, as it can be tricky to use the drag events directly. Here are examples of draggable elements and drop zones.)
  • form events: 'submit' (example), 'change' (example), 'focus'/'blur' (example).
  • window events: 'scroll' (example), 'reload', 'hashchange'
When you add an event listener and the event happens, jQuery will call your code back with a jQuery event object that has relevant properties on it. Read the documentation to learn more about what properties are available.

Want to join the conversation?

  • duskpin ultimate style avatar for user Sneha123
    What are you supposed to do in the challenge "Croc Clicker"?
    (4 votes)
    Default Khan Academy avatar avatar for user
    • spunky sam blue style avatar for user savioxavier112
      You have to use jQuery to add an event listener to the element with id crocs

      Make an event listener like this:

      $("#crocs").on("click", function() {

      })


      Then add the code for changing the text of #results and then increment the numClicks variable by 1:
      $("#crocs").on("click", function() {
      $("#results").text("You clicked " + numClicks + " times");
      numClicks++;
      })


      Make sure you define variable numClicks outside the event listener function

      I would be a good idea to show your source code next time.

      Hope this helps
      (5 votes)
  • aqualine ultimate style avatar for user Nondera
    What's wrong with my codes?

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Challenge: Spot the Dog</title>
    <style>
    .dot {
    border-radius: 10px;
    background: black;
    position: absolute;
    width: 10px;
    height: 10px;
    }
    </style>
    </head>
    <body>

    <img id="dog-pic" src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Alopekis_white_male.jpg" width="500" alt="White dog">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    $("#dog-pic").on("click", function(event) {
    var $dot = $("<div></div>");
    $dot.addClass("dot");
    $dot.css("position","absolute");
    $dot.css("top","event.pageY" + "px");
    $dot.css("left","event.pageX" + "px");
    $dot.appendTo("body");
    });


    </script>



    </body>
    </html>
    (3 votes)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user Efe Yencilek
    Can't we just do it like this:


    $("element").click(function(event) {
    console.log("blabla")
    })

    What's the difference of what we learned? Aren't they both the same thing?
    (1 vote)
    Default Khan Academy avatar avatar for user
  • duskpin ultimate style avatar for user Sneha123
    How to do "croc clicker"?
    (2 votes)
    Default Khan Academy avatar avatar for user
  • winston default style avatar for user Victor Gutierrez
    Why in the mousemove example there is no "on" method used? I have tried to use this strange procedure on other examples and it won´t work. Is it because this strange procedure is only valid when we are listening to events on the document?
    (1 vote)
    Default Khan Academy avatar avatar for user
  • winston default style avatar for user Victor Gutierrez
    Why if I delete the script-tag where the JQuery library is taken from a CDN nothing happens?? I´ve tried this in the example above: mouse events, click.
    (1 vote)
    Default Khan Academy avatar avatar for user
  • hopper cool style avatar for user Moses
    What does MDN, stand for?
    (1 vote)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user Mustafa Alhamadah
    What if you wanted to do something on hover?
    (1 vote)
    Default Khan Academy avatar avatar for user
  • leafers sapling style avatar for user green_ninja
    How can I create a loop (for or if) in jQuery that will display a picture every 20 units or so? An exact code would be great.

    Thanks!
    (1 vote)
    Default Khan Academy avatar avatar for user
    • blobby green style avatar for user Efe Yencilek
      After having taken a long break, sorry for that, I have what you're looking for, with the loop right below you can stack your pictures vertically(20px apart from each other):
      const windowWidth = $(window).height();
      var displayPos = 20;

      for (var i=0;i*displayPos<windowWidth;i++) {
      var $img = $('<img></img>');
      displayX = i*displayPos;
      $img.css("position","absolute");
      $img.css("top",${displayX}px) // You can change the unit to 'em' or 'vh'
      $img.appendTo("body");
      }

      If there still is something missing, do let me know, good luck :)
      (1 vote)
  • leafers sapling style avatar for user green_ninja
    Hi!

    How do you make text that pops up on the screen as if someone was actively typing it? Also, I'm trying to create dialogue boxes that change every time the user clicks for the project at the end of this unit. How would I do so?

    Thanks!
    (1 vote)
    Default Khan Academy avatar avatar for user