Cách gọi hàm JavaScript khi sự kiện click (onclick)?

JavaScript tương tác với HTML thông qua các sự kiện (events): tải trang, click chuột, nhấn phím, đóng cửa sổ, resize...

Sự kiện onclick xảy ra khi người dùng nhấn nút chuột trái. Đặt code validation, cảnh báo, xử lý logic... vào sự kiện này.

Ví dụ: Gọi hàm khi click nút

<!DOCTYPE html>
<html>
<head>
    <script>
        function sayHello() {
            alert("Thông báo demo!");
        }
    </script>
</head>
<body>
    <p>Nhấn nút bên dưới để xem kết quả:</p>
    <form>
        <input type="button" onclick="sayHello()" value="Nhấn tôi" />
    </form>
</body>
</html>

Các cách gán sự kiện click:

Cách	Cú pháp	Ưu/nhược điểm
Inline (HTML)	`onclick="ham()"`	Đơn giản nhưng lẫn logic vào HTML, khó bảo trì.
DOM Property	`el.onclick = ham`	Chỉ gán 1 handler, ghi đè nhau.
addEventListener	`el.addEventListener('click', ham)`	Khuyến nghị: gán nhiều handler, tách biệt logic.

Ví dụ addEventListener (khuyến nghị):

<button id="btn">Nhấn tôi</button>
<script>
    document.getElementById('btn').addEventListener('click', function() {
        alert('Đã click!');
    });
</script>

Mẹo: Dùng event.preventDefault() trong handler nếu cần chặn hành vi mặc định (VD: submit form, link).