HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>triggerHandler focus demo</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    button { margin: 8px 8px 8px 0; padding: 8px 14px; cursor: pointer; }
    input { display: block; margin: 12px 0; padding: 8px; width: 220px; }
    #log { margin-top: 10px; color: #1d4ed8; font-weight: bold; min-height: 3em; }
  </style>
</head>
<body>
  <button type="button" id="old">.trigger("focus")</button>
  <button type="button" id="new">.triggerHandler("focus")</button>
  <input type="text" placeholder="Focus target">
  <div id="log">Click a button above. Both run the jQuery focus handler.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#old").on("click", function() {
      $("input").trigger("focus");
      $("#log").append("<br>trigger('focus') — handler + may native-focus input.");
    });
    $("#new").on("click", function() {
      $("input").triggerHandler("focus");
      $("#log").append("<br>triggerHandler('focus') — jQuery handler only.");
    });
    $("input").on("focus", function() {
      $("<div>Focused!</div>").appendTo("body").fadeOut(1000);
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery trigger vs triggerHandler — focus demo (Try It)