HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>target matches</title>
  <style>
    #toolbar { display: flex; gap: 8px; padding: 12px; background: #f1f5f9; }
    #toolbar button { padding: 8px 12px; cursor: pointer; }
  </style>
</head>
<body>
  <div id="toolbar">
    <button type="button" data-action="save">Save</button>
    <button type="button" data-action="export">Export</button>
    <span>Not a button</span>
  </div>
  <pre id="out">Waiting...</pre>
  <script>
    var toolbar = document.getElementById("toolbar");
    var out = document.getElementById("out");

    toolbar.addEventListener("click", function (event) {
      var el = event.target;
      if (!(el instanceof Element) || !el.matches("button[data-action]")) {
        out.textContent = "Ignored (not an action button)";
        return;
      }
      out.textContent = "Action: " + el.dataset.action;
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Event.target — matches filter (Try It)