Cách gọi nhiều hàm JavaScript trong sự kiện onclick

Để gọi nhiều hàm JavaScript khi sự kiện onclick xảy ra (click chuột), có 3 cách phổ biến:

Cách 1: Dấu chấm phẩy (;) trong attribute HTML - Đơn giản nhất

<button onclick="func1(); func2(); func3();">Click me</button>

• Các hàm chạy lần lượt theo thứ tự.
• Nếu hàm trước ném lỗi (throw), các hàm sau không chạy.
• Phù hợp: Logic đơn giản, ít hàm, không quan tâm lỗi.

Cách 2: Hàm wrapper (Wrapper Function) - Khuyên dùng cho logic phức tạp

<script>
function handleClick() {
    func1();
    func2();
    func3();
    // Có thể thêm try/catch, logic điều kiện, logging...
}
</script>
<button onclick="handleClick()">Click me</button>

• Tách HTML ra khỏi logic JS.
• Dễ debug, bảo trì, test.
• Có thể xử lý lỗi từng hàm riêng biệt (try/catch).
• Có thể truyền tham số, dùng this, event.

Cách 3: addEventListener (Chuẩn hiện đại, tách biệt hoàn toàn)

<button id="myBtn">Click me</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(event) {
    func1();
    func2(event); // Truyền event object
    func3();
});

// Hoặc gán nhiều listener riêng biệt (chạy độc lập, không ảnh hưởng nhau)
document.getElementById("myBtn").addEventListener("click", func1);
document.getElementById("myBtn").addEventListener("click", func2);
document.getElementById("myBtn").addEventListener("click", func3);
</script>

• Best Practice hiện đại: Tách HTML/JS, hỗ trợ nhiều listener cho 1 event, truyền event object tự động, dễ gỡ (removeEventListener).
• Các listener chạy độc lập: Lỗi listener 1 không chặn listener 2,3.

So sánh

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

<!DOCTYPE html>
<html>
<head>
<script>
    function showHello() {
        console.log("Hello!");
        document.getElementById("log").innerHTML += "Hello!<br>";
    }
    function showWorld() {
        console.log("World!");
        document.getElementById("log").innerHTML += "World!<br>";
    }
    function showTime() {
        console.log("Time: " + new Date().toLocaleTimeString());
        document.getElementById("log").innerHTML += "Time: " + new Date().toLocaleTimeString() + "<br>";
    }
</script>
</head>
<body>
<p>Click nút dưới:</p>
<button id="btn">Gọi 3 hàm</button>
<div id="log"></div>

<script>
    const btn = document.getElementById("btn");
    // Cách 1: Một handler gọi nhiều hàm (kiểm soát trình tự, lỗi)
    btn.addEventListener("click", function() {
        try { showHello(); } catch(e) { console.error(e); }
        try { showWorld(); } catch(e) { console.error(e); }
        try { showTime(); } catch(e) { console.error(e); }
    });
    
    // Cách 2: Nhiều handler độc lập (khuyên dùng nếu hàm không liên quan)
    // btn.addEventListener("click", showHello);
    // btn.addEventListener("click", showWorld);
    // btn.addEventListener("click", showTime);
</script>
</body>
</html>

Kết luận: Với ứng dụng thực tế, hãy dùng addEventListener (cách 3) - tách biệt HTML/JS, chạy độc lập, truyền event object, dễ quản lý. Cách 1 (dấu ;) chỉ dùng cho test nhanh.