Event mouse

Menghubungkan jQuery

Pastikan Anda sudah menghubungkan jQuery ke halaman HTML Anda. Anda bisa mengunduh jQuery dari situs resminya atau menggunakan CDN (Content Delivery Network) seperti ini di dalam tag <head>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Menggunakan Event Mouse

1.Mouse Click Event

Anda bisa menambahkan event handler untuk meng-handle klik mouse. Misalnya, jika Anda ingin menangani klik pada sebuah tombol dengan ID "myButton":

$('#myButton').on('click', function() {
   // Kode yang akan dijalankan ketika tombol diklik
});

2.Mouse Hover Event

Untuk menangani peristiwa saat mouse hover di atas elemen, Anda dapat menggunakan mouseenter dan mouseleave. Contoh:

$('#myElement').on('mouseenter', function() {
   // Kode yang akan dijalankan saat mouse masuk ke elemen
});

$('#myElement').on('mouseleave', function() {
   // Kode yang akan dijalankan saat mouse meninggalkan elemen
});

3.Mouse Move Event

Anda juga bisa mendeteksi pergerakan mouse dengan event mousemove

$('#myElement').on('mousemove', function(event) {
   // Kode yang akan dijalankan saat mouse bergerak di atas elemen
   // Anda dapat mengakses posisi mouse dengan `event.pageX` dan `event.pageY`
});

4.Menghentikan Event Default

Jika Anda ingin menghentikan perilaku default dari event, Anda dapat menggunakan event.preventDefault() dalam handler.

Semoga tutorial ini membantu Anda untuk memahami dasar-dasar penggunaan event mouse dengan jQuery. Anda dapat menggantikan ID dan selector dengan elemen sesuai kebutuhan Anda.

PREVIOUS
NEXT