Events

What you'll learn

How to react to clicks and other user actions with .on(), and how to read what the user typed.

Why it matters

Pages become interactive when code responds to what people do: buttons, forms, menus and keyboard shortcuts.

Explanation

An event is something that happens: a click, a key press, the mouse entering an element. You attach a handler, a function that runs when it happens:

Useful events: click, dblclick, mouseenter, mouseleave, keyup, change, submit.

Inside a handler, $(this) is the element that triggered it. For inputs, .val() reads or sets the value.

Example

Step-by-step walkthrough

1. clicks starts at 0 and lives outside the handler, so it remembers its value.
2. Each click runs the first handler: add one and rewrite the paragraph.
3. Each key release in the input runs the second handler.
4. $(this).val() reads the current text in the input, which is displayed in #hello.

Try it yourself

Add a second button that resets clicks to 0 and updates the text.

EventsjQuery

Editable code<button id="btn">Click me</button> <p id="out">Clicks: 0</p> <script> $(function () { let clicks = 0; $("#btn").on("click", function () { clicks++; $("#out").text("Clicks: " + clicks); }); }); </script>

Run ResetCopyCtrl+Enter to run

Common mistakes

• Attaching handlers before the element exists. Put code inside $(function () { ... }).
• Calling the function instead of passing it: .on("click", doIt()) runs immediately.
• Using an arrow function and relying on this. In handlers that use $(this), use a normal function.
• Attaching the same handler twice, causing doubled actions.

Quick quiz

Summary

• .on("event", handler) runs code when something happens.
• $(this) is the element that fired the event; .val() reads form values.
• Keep state outside the handler.

Next: effects and animation.

$("#btn").on("click", function () {
  // runs on every click
});

<button id="btn">Click me</button>
<p id="out">Clicks: 0</p>

<input id="name" placeholder="Type your name">
<p id="hello"></p>

<script>
  $(function () {
    let clicks = 0;

    $("#btn").on("click", function () {
      clicks++;
      $("#out").text("Clicks: " + clicks);
    });

    $("#name").on("keyup", function () {
      $("#hello").text("Hello, " + $(this).val());
    });
  });
</script>