Ada beberapa cara memanggil fungsi JavaScript dari HTML, tergantung kebutuhan dan praktik terbaik yang ingin diikuti. Berikut ringkasannya, dari cara lama sampai pendekatan modern yang direkomendasikan.

1. Event Handler Inline (Cara Lama, Sebaiknya Dihindari)

<button onclick="tampilkanPesan()">Klik Saya</button>

<script>
function tampilkanPesan() {
    alert("Halo!");
}
</script>

Cara ini paling mudah dipahami pemula, tapi tidak direkomendasikan untuk proyek serius karena mencampur logika JavaScript langsung ke markup HTML (melanggar prinsip separation of concerns), dan bisa diblokir oleh Content Security Policy (CSP) yang ketat.

2. addEventListener (Cara Modern, Direkomendasikan)

<button id="tombolSaya">Klik Saya</button>

<script>
document.getElementById("tombolSaya").addEventListener("click", function() {
    alert("Halo!");
});
</script>

Pendekatan ini memisahkan HTML dan JavaScript, lebih mudah di-maintain, dan mendukung banyak event listener sekaligus pada elemen yang sama tanpa saling menimpa.

3. Memanggil Fungsi Saat Halaman Selesai Dimuat

<script>
document.addEventListener("DOMContentLoaded", function() {
    console.log("Halaman siap!");
    inisialisasi();
});

function inisialisasi() {
    // kode yang butuh DOM sudah siap
}
</script>

Penting untuk fungsi yang mengakses elemen DOM — kalau dipanggil sebelum DOMContentLoaded, elemen yang dicari mungkin belum ada di halaman sehingga fungsi gagal berjalan.

4. Memanggil Fungsi dari File JavaScript Eksternal

<!-- di file HTML -->
<script src="script.js" defer></script>
<button id="tombolSaya">Klik Saya</button>

// isi file script.js
document.getElementById("tombolSaya").addEventListener("click", () => {
    alert("Halo dari file eksternal!");
});

Atribut defer memastikan script dijalankan setelah HTML selesai di-parse, tanpa memblokir rendering halaman — praktik standar untuk performa yang lebih baik.

Belajar JavaScript dari dasar sampai DOM manipulation dan event handling bisa diikuti di Kursus JavaScript Edusoft Center.

Direview oleh Komarudin Syarif — Trainer Edusoft Center.
Terakhir diperbarui: 11 Agustus 2026.