The masuk tikus event dalam JavaScript adalah fungsi populer dan umum digunakan yang dipicu ketika penunjuk tetikus memasuki elemen yang dipilih. Biasanya digunakan untuk interaktivitas di halaman web, meningkatkan pengalaman pengguna dengan memberikan respons instan terhadap gerakan mouse. Artikel ini akan mengeksplorasi event mouseenter secara mendalam, membahas kegunaannya, cara kerjanya, dan memberikan panduan langkah demi langkah tentang cara menggunakannya dalam kode Anda.
Menjelajahi Acara mouseenter JavaScript
Ketika membahas penanganan event di JavaScript, masuk tikus acara memainkan peran penting, terutama dalam memberikan umpan balik interaktif pada elemen halaman web. Dibandingkan dengan kejadian tikus lainnya, masuk tikus mengambil posisi yang unik. Berbeda dengan di atas mouse, acara JavaScript terkenal lainnya, the masuk tikus event hanya terpicu ketika penunjuk tetikus memasuki elemen yang ditentukan, dan tidak muncul dari elemen turunan.
element.addEventListener("mouseenter", function(){
// code to be executed
});
Solusinya: Memasukkan mouseenter ke dalam Kode Anda
memasukkan masuk tikus ke dalam kode JavaScript Anda cukup mudah.
let enterElement = document.querySelector('.enter');
enterElement.addEventListener("mouseenter", function(){
enterElement.style.color = "red";
});
Kode ini melakukan hal sederhana – saat Anda mengarahkan mouse ke elemen dengan kelas “enter”, warna teks elemen ini berubah menjadi merah.
Menggali Lebih Dalam: Penjelasan Kode Langkah demi Langkah
Langkah 1: Pertama, kita menargetkan elemen yang kita inginkan masuk tikus acara untuk diterapkan. Hal ini dicapai dengan menggunakan querySelector Metode.
- biarkan enterElement = document.querySelector('.enter');
Langkah 2: Kemudian, kami menerapkan tambahkanEventListener metode untuk melampirkan masuk tikus acara ke elemen yang kita pilih, menentukan fungsionalitas dalam suatu fungsi.
- enterElement.addEventListener("mouseenter", fungsi(){…
Langkah 3: Dalam masuk tikus fungsi, kami mendefinisikan apa yang terjadi ketika penunjuk tetikus memasuki elemen. Dalam contoh ini, warna teks elemen akan berubah menjadi merah.
- enterElement.style.color = “merah”;
Perpustakaan dan Fungsi yang Relevan
Meskipun acara mouseenter pada dasarnya adalah bagian dari JavaScript, acara ini juga didukung di perpustakaan JavaScript, seperti jQuery. Konsepnya sama; namun, sintaksnya sedikit berbeda. Kode yang setara di jQuery akan terlihat seperti ini:
$(".enter").mouseenter(function(){
$(this).css("color", "red");
});
Singkatnya, masuk tikus event memberikan cara yang sangat berguna untuk meningkatkan sifat interaktif laman web Anda, dengan penyiapan dan penerapan sederhana. Cara Anda memanfaatkan acara ini hanya dibatasi oleh kreativitas Anda.
