HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>on custom event demo</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 420px; }
    p { color: red; font-size: 1.1em; }
    span { color: blue; display: block; margin-top: 8px; min-height: 1.2em; }
    button { padding: 8px 16px; cursor: pointer; margin-top: 8px; }
  </style>
</head>
<body>
  <p>Has an attached custom event.</p>
  <button type="button">Trigger custom event</button>
  <span></span>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("p").on("myCustomEvent", function(event, myName) {
      $(this).text(myName + ", hi there!");
      $("span")
        .stop()
        .css("opacity", 1)
        .text("myName = " + myName)
        .fadeIn(30)
        .fadeOut(1000);
    });
    $("button").click(function() {
      $("p").trigger("myCustomEvent", ["John"]);
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .on('myCustomEvent') — custom event + trigger (Try It)