Thực thi script khi phần tử được click (onclick) trong HTML?

Sự kiện onclick kích hoạt khi người dùng click chuột trái (hoặc tap) vào phần tử. Dùng cho: nút bấm, link, card, đóng modal, toggle menu...

Ví dụ

<!DOCTYPE html>
<html>
  <body>
    <button onclick="display()">Nhấn tôi</button>
    <p id="test"></p>
    <script>
      function display() {
        document.getElementById("test").innerHTML = "Bạn đã nhấn nút!";
      }
    </script>
  </body>
</html>

Cách hiện đại: addEventListener

<button id="btn">Nhấn tôi</button>
<script>
  document.getElementById('btn').addEventListener('click', function(e) {
    console.log('Click tại:', e.clientX, e.clientY);
    this.textContent = 'Đã nhấn!';
  });
</script>

Sự kiện chuột liên quan

Lưu ý

• Tránh onclick="..." inline — khó bảo trì, CSP chặn. Dùng addEventListener.
• Delegation: gán listener cho cha, kiểm tra e.target.matches('selector').
• Accessibility: phần tử click phải focusable (button, a, tabindex=0) và xử lý Enter/Space.