. pusat tetikus acara dalam JavaScript ialah fungsi yang popular dan biasa digunakan yang dicetuskan apabila penuding tetikus memasuki elemen yang dipilih. Ia biasanya digunakan untuk interaktiviti pada halaman web, meningkatkan pengalaman pengguna dengan memberikan tindak balas segera kepada tuding tetikus. Artikel ini akan meneroka peristiwa masuk tetikus secara mendalam, membincangkan kegunaannya, cara ia berfungsi dan menyediakan panduan langkah demi langkah tentang cara menggunakannya dalam kod anda.
Meneroka Acara tetikus JavaScript
Apabila ia datang kepada pengendalian acara dalam JavaScript, the pusat tetikus acara memainkan peranan penting, terutamanya dalam menyediakan maklum balas interaktif tentang elemen halaman web. Berbanding dengan acara tetikus lain, pusat tetikus mengambil kedudukan yang unik. Tidak seperti di rumah pengembara, satu lagi acara JavaScript yang terkenal, the pusat tetikus peristiwa hanya dicetuskan apabila penuding tetikus memasuki elemen yang ditentukan dan tidak muncul daripada elemen kanak-kanak.
element.addEventListener("mouseenter", function(){
// code to be executed
});
Penyelesaian: Memasukkan mouseenter ke dalam Kod Anda
Mengandungi pusat tetikus ke dalam kod JavaScript anda agak mudah.
let enterElement = document.querySelector('.enter');
enterElement.addEventListener("mouseenter", function(){
enterElement.style.color = "red";
});
Kod ini melakukan perkara yang mudah - apabila anda menavigasi tetikus anda ke atas elemen dengan kelas "masuk", warna teks elemen ini menjadi merah.
Menggali Lebih Dalam: Penjelasan Kod Langkah demi langkah
Langkah 1: Pertama, kami menyasarkan elemen yang kami mahukan pusat tetikus acara untuk memohon. Ini dicapai menggunakan querySelector kaedah.
- biarkan enterElement = document.querySelector('.enter');
Langkah 2: Kemudian, kami memohon tambahEventListener kaedah untuk melampirkan pusat tetikus acara kepada elemen pilihan kami, menyatakan fungsi dalam fungsi.
- enterElement.addEventListener(“mouseenter”, function(){…
Langkah 3: Dalam pusat tetikus fungsi, kami mentakrifkan apa yang berlaku apabila penunjuk tetikus memasuki elemen. Dalam keadaan ini, warna teks elemen akan bertukar kepada merah.
- enterElement.style.color = “merah”;
Perpustakaan dan Fungsi Berkaitan
Walaupun acara mouseenter pada asasnya adalah sebahagian daripada JavaScript, ia juga disokong dalam perpustakaan JavaScript, seperti jQuery. Konsepnya sama; namun, sintaksnya berbeza sedikit. Kod yang setara dalam jQuery akan kelihatan seperti ini:
$(".enter").mouseenter(function(){
$(this).css("color", "red");
});
Secara ringkasnya, pusat tetikus acara menyediakan cara yang sangat berguna untuk meningkatkan sifat interaktif halaman web anda, dengan persediaan dan pelaksanaan yang mudah. Cara anda menggunakan acara ini hanya terhad oleh kreativiti anda.
