Metode addEventListener() memungkinkan Anda menyematkan fungsi pendengar aksi pengguna tanpa mencemari kode HTML dengan atribut onclick.
JS HTML Events
Contoh Kode JS HTML Events:
<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px;">
<h2>Deteksi Ketikan Real-Time (Event keyup)</h2>
<input type="text" id="kotakKetik" placeholder="Ketik sesuatu di sini..." style="padding:10px; width:280px; border-radius:6px; border:1px solid #cbd5e1;">
<p>Hasil ketikan Anda: <strong id="tampilanKetik" style="color:#0d2e5c;"></strong></p>
<script>
const input = document.getElementById('kotakKetik');
const view = document.getElementById('tampilanKetik');
input.addEventListener('input', function(e) {
view.innerText = e.target.value;
});
</script>
</body>
</html>
Uji kode JavaScript di atas dengan menekan tombol atau mengamati perubahan nilai pada elemen HTML.