HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>trigger event object demo</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 440px; }
    button { padding: 10px 18px; cursor: pointer; font-size: 1rem; }
    #log { margin-top: 14px; padding: 12px; background: #f3f4f6; border-radius: 6px; font-weight: 600; white-space: pre-wrap; }
  </style>
</head>
<body>
  <button type="button" id="fire">Trigger logged event</button>
  <div id="log">Click button to trigger jQuery.Event("logged").</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("body").on("logged", function(e) {
      e.preventDefault();
      $("#log").text("Handler ran\nUser: " + e.user + "\nPass: " + e.pass + "\npreventDefault called.");
    });
    $("#fire").on("click", function() {
      var event = jQuery.Event("logged");
      event.user = "foo";
      event.pass = "bar";
      $("body").trigger(event);
      var msg = $("#log").text();
      if (event.isDefaultPrevented()) {
        msg += "\n\nisDefaultPrevented(): true";
      }
      $("#log").text(msg);
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .trigger(jQuery.Event) — logged event object (Try It)