JavaScript - Pandangan Awal ke even

Hai sana, para ahli JavaScript masa depan! Hari ini, kita akan melangkah ke dalam dunia menarik even JavaScript. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk memandu Anda melalui konsep fundamental ini yang akan memberikan nyawa ke halaman web Anda. Jadi, ambil minuman kesukaan Anda, duduk nyaman, dan mari kita masuk ke dalam!

Apa Itu Even?

Imaginasi Anda di sebuah pesta ( tentu saja pesta coding !). Setiap kali sesuatu terjadi - seseorang datang, lagu mulai dimainkan, atau seseorang tumpahkan minumannya - itu adalah even. Dalam dunia JavaScript, even bekerja sama seperti itu. Itu adalah hal yang terjadi di halaman web Anda yang JavaScript dapat deteksi dan merespon.

Even dapat dipicu oleh:

• Tindakan pengguna ( mengklik tombol, memindahkan mouse )
• Aktivitas browser ( menyelesaikan penggunaan halaman )
• Perubahan dalam keadaan elemen di halaman

Ini adalah contoh sederhana untuk mengilustrasikan konsep ini:

<button id="myButton">Klik saya!</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("Tombol diklik!");
});
</script>

Dalam contoh ini, mengklik tombol ( even) menyebabkan alert muncul ( tanggapan). Itu seperti mengatakan, "Hey JavaScript, ketika seseorang mengklik tombol ini, tunjukkan pesan ini!"

Penanganan Even JavaScript

Sekarang kita mengerti apa itu even, mari bicarakan bagaimana kita menangani mereka. Penanganan even adalah fungsi JavaScript yang dijalankan saat even terjadi. Itu seperti petugas pengaman di pesta coding kita, memutuskan apa yang terjadi saat setiap even terjadi.

Ada beberapa cara untuk menugaskan penanganan even di JavaScript. Mari kita jelajahi mereka:

1. Penanganan Even Inline

Ini adalah cara termudah ( tetapi tidak selalu yang terbaik) untuk menangani even:

<button onclick="alert('Halo, Dunia!')">Klik saya</button>

Di sini, penanganan even ditulis langsung di HTML. Ketika tombol diklik, itu menampilkan alert. Meskipun ini mudah dipahami, biasanya tidak direkomendasikan untuk aplikasi yang lebih besar karena itu mencampur HTML dan JavaScript.

2. Penanganan Even Properti

Sebuah pendekatan yang lebih baik adalah memisahkan JavaScript Anda dari HTML Anda:

<button id="myButton">Klik saya</button>

<script>
document.getElementById("myButton").onclick = function() {
alert("Halo dari penanganan even properti!");
};
</script>

Metode ini menugaskan suatu fungsi ke properti onclick elemen tombol. Itu lebih bersih, tetapi memiliki batasan: Anda hanya dapat menugaskan satu penanganan even per even seperti ini.

3. Metode addEventListener()

Ini adalah cara yang paling fleksibel dan kuat untuk menangani even:

<button id="myButton">Klik saya</button>

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

Dengan addEventListener(), Anda dapat:

• Menugaskan beberapa penanganan even ke satu elemen
• Mudah menghapus penanganan even saat diperlukan
• Memiliki kendali lebih banyak atas kapan pendengar diaktifkan dalam siklus even

mari lihat contoh yang lebih kompleks:

<button id="myButton">Klik saya</button>

<script>
let button = document.getElementById("myButton");

function changeColor() {
this.style.backgroundColor = "merah";
}

function addBorder() {
this.style.border = "2px solid biru";
}

button.addEventListener("click", changeColor);
button.addEventListener("click", addBorder);
</script>

Dalam contoh ini, mengklik tombol mengubah warna menjadi merah DAN menambahkan border biru. Dua penanganan untuk satu even!

Objek Even JavaScript

Saat even terjadi, JavaScript membuat Objek Even. Objek ini berisi rincian tentang even, seperti di mana even itu terjadi, jenis even apa, dan kadang-kadang informasi tambahan yang khusus untuk jenis even itu.

mari lihat contoh:

<button id="myButton">Klik saya</button>

<script>
document.getElementById("myButton").addEventListener("click", function(event) {
console.log("Jenis even: " + event.type);
console.log("Elemen target: " + event.target.tagName);
console.log("Posisi X Mouse: " + event.clientX);
console.log("Posisi Y Mouse: " + event.clientY);
});
</script>

Saat Anda mengklik tombol, skrip ini mencatat informasi tentang even klik, termasuk:

• Jenis even ("klik")
• Elemen yang dipicu (elemen "BUTTON")
• Koordinat X dan Y mouse saat klik terjadi

Informasi ini bisa sangat berguna untuk membuat aplikasi web interaktif dan responsif.

Berikut adalah tabel yang menggabungkan beberapa properti umum Objek Even:

Properti	Deskripsi
type	Jenis even (misalnya, "klik", "mouseover")
target	Elemen yang memicu even
clientX, clientY	Koordinat horizontal dan vertikal pointer mouse
keyCode	Kode tombol yang ditekan (untuk even keyboard)
preventDefault()	Metode untuk mencegah aksi default even
stopPropagation()	Metode untuk menghentikan even dari membubarkan ke DOM

Ingat, jenis even yang berbeda mungkin memiliki properti khusus tambahan. Selalu periksa dokumentasi untuk daftar lengkap properti yang tersedia untuk setiap jenis even.

Untuk kesimpulan, even adalah denyut jantung aplikasi web interaktif. Mereka memungkinkan JavaScript Anda untuk merespon tindakan pengguna dan menciptakan pengalaman yang dinamis dan menarik. Sebagai Anda terus melanjutkan perjalanan JavaScript Anda, Anda akan menemukan diri Anda bekerja dengan even lebih dan lebih. Embrasyikan mereka, eksperimen dengan mereka, dan lihat halaman web Anda hidup!

Happy coding, para ninja JavaScript masa depan! ??

Credits: Image by storyset