FOOMBET – Event HTML adalah tindakan atau kejadian yang terjadi selama proses pemuatan halaman web atau saat pengguna berinteraksi dengan halaman tersebut. Event-event ini dapat memicu fungsi JavaScript, memungkinkan Anda membuat halaman web yang interaktif dan dinamis. Mari jelajahi beberapa event HTML umum dan cara menggunakannya:
baca juga : belajar html tag komentar dasar dan pengertian
1. Atribut Event
Atribut event HTML digunakan untuk menentukan kode JavaScript yang akan dieksekusi ketika sebuah event terjadi. Anda dapat menambahkan atribut event langsung ke elemen HTML. Berikut beberapa contohnya:
- onclick: Mengeksekusi JavaScript ketika pengguna mengklik suatu elemen.
- onmouseover: Mengeksekusi JavaScript ketika pengguna mengarahkan mouse ke atas suatu elemen.
- onload: Mengeksekusi JavaScript ketika halaman web telah selesai dimuat.
<button onclick="alert('Tombol diklik!')">Klik saya</button>
2. Handler Event
Handler event adalah fungsi JavaScript yang dipanggil ketika suatu event tertentu terjadi. Anda dapat mendefinisikan handler event secara terpisah dalam tag <script> atau dalam sebuah file JavaScript eksternal. Berikut contohnya:
<script>
function tampilkanAlert() {
alert('Tombol diklik!');
}
</script>
<button onclick="tampilkanAlert()">Klik saya</button>
3. Menambahkan Event Listener
Penggunaan event listener lebih disukai daripada atribut event inline karena memungkinkan Anda untuk menambahkan beberapa handler event untuk event yang sama. Anda dapat menggunakan metode addEventListener() untuk menambahkan event listener ke elemen HTML. Contohnya:
<button id="tombolSaya">Klik saya</button><script>
document.getElementById('tombolSaya').addEventListener('click', function() {
alert('Tombol diklik!');
});
</script>
4. Event HTML Umum
Beberapa event HTML umum meliputi:
- click: Terjadi ketika sebuah elemen diklik.
- mouseover: Terjadi ketika kursor mouse bergerak ke atas suatu elemen.
- mouseout: Terjadi ketika kursor mouse meninggalkan suatu elemen.
- keydown: Terjadi ketika sebuah tombol pada keyboard ditekan.
- submit: Terjadi ketika sebuah formulir diserahkan.
baca juga : warna html menjelajahi opsi warna untuk halaman web anda
Kesimpulan HTML Events
Dengan memahami event HTML, Anda dapat membuat halaman web yang lebih interaktif dan responsif terhadap interaksi pengguna. Cobalah bermain-main dengan event-event ini untuk meningkatkan pengalaman pengguna pada situs web Anda.
