Digitalmapia adalah situs dimana semua orang bisa menulis artikelnya sendiri. Klik "Login/Register untuk masuk, lalu klik "Tulis Artikel" untuk mulai menulis.

Seri belajar JQuery(4) : Berkenalan dengan event click, change dan hover.

Tulisan ini adalah tutorial berseri tentang JQuery, apa yang ditulis disini merupakan kelanjutan dari tulisan sebelumnya, berikut ini adalah daftar lengkap seri belajar JQuery pada blog ini:

Event Click

Event adalah sebuah aktivitas yang dilakukan oleh pengguna ketika membuka halaman website. Event tersebut misalnya click, change, hover dan lain-lain. Pada JQuery kita menggunakan event sebagai trigger (pemicu) suatu perintah. Misal:

Jika tombol A di-klik, maka akan muncul alert dengan tulisan “Hello”

Pada kalimat diatas, “tombol A di-klik” merupakan sebuah event. Dimana jika event itu terjadi, maka akan muncul alert dengan tulisan “Hello”. Jika kalimat tersebut diterjemahkan menjadi kode program, bentuknya kira-kira seperti berikut:

<!DOCTYPE html>
<html>
<head>
	<title>Belajar JQuery</title>
</head>
<body>

	<button>A</button>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		$('button').click(function(){
			alert("Hello");
		})
	</script>
</body>
</html>

Pada contoh diatas, kita menggunakan fungsi click() pada JQuery. Dimana didalam fungsi click tersebut kita memasukan fungsi lain sebagai parameter. Dalam hal ini, fungsi yang digunakan sebagai parameter tersebut adalah berupa anonymous function. Artinya, fungsi yang tidak memiliki nama. Fungsi yang dilewatkan sebagai parameter dinamakan dengan handler.

Sekarang, coba simpan file diatas satu folder dengan jquery.min.js lalu buka dengan menggunakan browser. Setelah itu, klik tombol A dan anda akan melihat hasilnya.

Event Change

Selain event click, terdapat pula event change. Event change akan dijalankan ketika sebuah dropdown list dipilih.

Ketika dropdown list dipilih, maka tampilkan tombol alert dengan tulisan “Item dipilih”

Pada kalimat diatas, “Ketika dropdown list dipilih” merupakan sebuah event. Jika kalimat diatas diterjemahkan ke dalam bentuk kode, maka hasilnya adalah sebagai berikut:

<!DOCTYPE html>
<html>
<head>
	<title>Belajar JQuery</title>
</head>
<body>

	<select>
		<option>hello</option>
		<option>apa</option>
		<option>kabar</option>
	</select>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		$('select').change(function(){
			alert("Item dipilih");
		})
	</script>
</body>
</html>

Sama seperti sebelumnya, pada kode kita menggunakan anonymous function. Hanya saja bedanya sekarang kita menggunakan fungsi change. Simpan kode diatas ke dalam sebuah file yang satu folder dengan jquery.min.js. Lalu buka pada browser dan coba pilih salah satu item. Anda akan melihat hasilnya.

Event Hover

Event hover adalah event yang dijalankan ketika kursor berada diatas (hover) dari suatu element tertentu. Perhatikan kode berikut:

<!DOCTYPE html>
<html>
<head>
	<title>Belajar JQuery</title>
</head>
<body>

	<button>A</button>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		$('button').hover(function(){
			alert("Hover sedang terjadi");
		})
	</script>
</body>
</html>

Sekarang, jika anda tempatkan kursor diatas tombol A, maka akan muncul alert dengan tulisan “Hover sedang terjadi”.

Menggunakan Event Data

Sebelumnya kita hanya melewatkan satu parameter ke dalam fungsi click. Setelah melihat dokumentasi JQuery disini, anda akan tahu bahwa kita juga bisa melewatkan parameter berupa JSON pada fungsi click(). Parameter ini ditempatkan sebelum fungsi handler:

<!DOCTYPE html>
<html>
<head>
	<title>Belajar JQuery</title>
</head>
<body>

	<button>A</button>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		$('button').click({ value: "datanya" }, function(event){
			alert(event.data.value);
		})
	</script>
</body>
</html>

Selain memuat parameter event data pada fungsi click(), kita juga bisa menempatkannya pada fungsi change().

<!DOCTYPE html>
<html>
<head>
	<title>Belajar JQuery</title>
</head>
<body>

	<select>
		<option>hello</option>
		<option>apa</option>
		<option>kabar</option>
	</select>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		$('select').change({ value: "datanya" }, function(event){
			alert(event.data.value);
		})
	</script>
</body>
</html>

Penutup

Selain ketiga event tersebut, masih ada banyak event lainnya yang bisa di-handle oleh JQuery. Seperti, double click, keydown, keypress, keyup, mousedown dan lain-lain. Untuk lebih lengkap mengenai event-event tersebut anda bisa melihatnya disini.

Semoga bermanfaat.

Belajar JQuery
  • Sulaidi Hasibuan

    saya punya dua buah select menu :

    Sabun
    Gula
    Rokok

    Rp 2.500
    Rp 5.000
    Rp 10.000

    Bagaimana
    caranya saat kita pilih salah satu item di select menu pertama maka
    select menu (harga) otomatis berganti? terima kasih om