HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>on events map demo</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    div.test {
      color: #000;
      padding: 1em;
      border: 2px solid #444;
      border-radius: 8px;
      cursor: pointer;
      max-width: 280px;
      transition: background 0.2s;
    }
    div.test.active { color: #900; font-weight: bold; }
    div.test.inside { background-color: #a5f3fc; }
    #log { margin-top: 12px; color: #374151; font-weight: 600; min-height: 1.5em; }
  </style>
</head>
<body>
  <div class="test">Hover and click me</div>
  <div id="log">Try mouseenter, mouseleave, and click.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("div.test").on({
      click: function() {
        $(this).toggleClass("active");
        $("#log").text("click → toggled active class");
      },
      mouseenter: function() {
        $(this).addClass("inside");
        $("#log").text("mouseenter → added inside class");
      },
      mouseleave: function() {
        $(this).removeClass("inside");
        $("#log").text("mouseleave → removed inside class");
      }
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .on({ ... }) — multiple events object map (Try It)