Cách gọi hàm JavaScript từ sự kiện onClick

Sự kiện onclick xảy ra khi người dùng nhấn chuột trái vào phần tử. Đây là cách phổ biến nhất để tương tác người dùng kích hoạt code JavaScript.

Cách 1: Attribute HTML (Inline) - Đơn giản, cũ

<button onclick="myFunction()">Click me</button>

<script>
function myFunction() {
    alert("Hello World!");
}
</script>

• Dễ hiểu, viết nhanh.
• Nhược điểm: Lẫn HTML/JS, khó bảo trì, CSP chặn ('unsafe-inline'), không truyền event object tự động (phải truyền onclick="myFunction(event)"), khó gỡ bỏ.

Cách 2: DOM Property (JavaScript) - Tách biệt hơn

<button id="myBtn">Click me</button>

<script>
function myFunction(event) {
    console.log("Clicked!", event.type); // Có event object
    alert("Hello World!");
}

document.getElementById("myBtn").onclick = myFunction;
// Hoặc anonymous function
// document.getElementById("myBtn").onclick = function(event) { ... };
</script>

• Tách HTML/JS.
• Truyền event object tự động.
• Nhược điểm: Chỉ gán được 1 handler (gán sau ghi đè trước).

Cách 3: addEventListener() - CHUẨN HIỆN ĐẠI, KHUYẾN DÙNG

<button id="myBtn">Click me</button>

<script>
function handleClick(event) {
    console.log("Button clicked", event.target);
    alert("Hello World!");
}

const btn = document.getElementById("myBtn");
btn.addEventListener("click", handleClick);

// Có thể gán NHIỀU handler cho 1 sự kiện
btn.addEventListener("click", function() { console.log("Logger"); });
btn.addEventListener("click", analyticsTrack);

// Gỡ bỏ khi không cần
// btn.removeEventListener("click", handleClick);
</script>

• Ưu điểm: Nhiều handler cho 1 event, truyền event object, tách biệt hoàn toàn HTML/JS, hỗ trợ capture, once, passive options, dễ gỡ (removeEventListener), tuân thủ CSP.
• Chuẩn W3C, hoạt động nhất quán mọi trình duyệt hiện đại.

Ví dụ hoàn chỉnh (HTML + addEventListener)

<!DOCTYPE html>
<html>
<head>
<script>
    function display() {
        alert("Hello World");
    }
</script>
</head>
<body>
<p>Click nút dưới:</p>
<button id="btn">Click me</button>

<script>
    // Cách 3: addEventListener (KHUYẾN DÙNG)
    document.getElementById("btn").addEventListener("click", display);
    
    // Bonus: Truyền tham số dùng arrow function/bind
    // document.getElementById("btn").addEventListener("click", () => display("Custom msg"));
</script>
</body>
</html>

Mẹo hay dùng

• Truyền tham số: btn.addEventListener("click", () => myFunc(arg1, arg2)) hoặc btn.addEventListener("click", myFunc.bind(null, arg1, arg2)).
• Ngăn chặn hành vi mặc định: event.preventDefault() (ví dụ: <a>, <form>).
• Ngăn event bubbling: event.stopPropagation().
• Delegate (Event Delegation): Gán listener cho cha, kiểm tra event.target để xử lý con động (hiệu năng tốt cho list lớn).

Kết luận: Luôn dùng addEventListener("click", handler) cho production code. Chỉ dùng onclick attribute cho test nhanh, prototype, hoặc email HTML (giới hạn JS).