event Object Tips

event Object Tips: free step-by-step lesson with examples, common mistakes, and interview tips — part of jQuery Tutorial on Toolliyo Academy.

8 min read Updated 8/23/2026

On this page

jQuery Tutorial · Lesson 30 of 100

event Object Tips

Setup & DOM ✓ → Events Effects AJAX → Perf & Integrate → Ship & Projects

Events Effects AJAX · 2 — Interact · ~6 min · Events

What is this?

The event object exposes type, target, currentTarget, key, preventDefault, stopPropagation, and page coordinates. Understanding target vs currentTarget fixes “wrong element” bugs in delegated handlers.

Why should you care?

QueryVerse delegated clicks often land on icons inside buttons — target may be the svg while currentTarget is the button.

See it live — copy this example

Examples include the jQuery 3.7 CDN. Paste into an HTML file or use Run Example to preview.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <div id="wrap" class="box">
    <button type="button" id="pay"><span class="label">Pay now</span></button>
  </div>
  <pre id="out" class="muted"></pre>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $('#wrap').on('click', 'button', function (e) {
    $('#out').text(JSON.stringify({
      type: e.type,
      target: e.target.className || e.target.tagName,
      currentTarget: e.currentTarget.id,
      thisId: this.id
    }, null, 2));
    e.preventDefault();
  });
});
</script>
</body>
</html>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <div id="wrap" class="box">
    <button type="button" id="pay"><span class="label">Pay now</span></button>
  </div>
  <pre id="out" class="muted"></pre>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $('#wrap').on('click', 'button', function (e) {
    $('#out').text(JSON.stringify({
      type: e.type,
      target: e.target.className || e.target.tagName,
      currentTarget: e.currentTarget.id,
      thisId: this.id
    }, null, 2));
    e.preventDefault();
  });
});
</script>
</body>
</html>

Result

What happened?

In delegated handlers, this/currentTarget is the element matching the filter; target is the deepest node clicked.
Use closest when needed.
preventDefault for links/forms; stopPropagation sparingly.