jQuery dibuat khusus untuk menanggapi peristiwa di halaman HTML.
Section Artikel
Pengertian Event
Semua tindakan user berbeda yang dapat direspons oleh halaman web disebut peristiwa.
Suatu peristiwa mewakili momen tepat ketika sesuatu terjadi.
Contoh:
- menggerakkan mouse ke sebuah elemen
- memilih tombol radio
- mengklik sebuah elemen
Istilah “fires/fired” sering digunakan dengan event. Contoh: “Peristiwa penekanan tombol dipicu, saat kita menekan tombol”.
Berikut beberapa event DOM yang umum:
| Mouse Events | Keyboard Events | Form Events | Document/Window Events |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | – | blur | unload |
jQuery Syntax Untuk Metode Event
Di jQuery, sebagian besar event DOM memiliki metode jQuery yang setara.
Untuk menetapkan event klik ke semua paragraf di halaman, seperti ini:
$("p").click();
Langkah selanjutnya adalah menentukan apa yang harus terjadi ketika event tersebut diaktifkan. Berikut syntax untuk meneruskan fungsi ke event:
$("p").click(function(){
// action goes here!!
});
Metode Event jQuery yang Umum Digunakan
$ (dokumen) .ready ()
Metode $(document) .ready() memungkinkan kita menjalankan fungsi saat dokumen dimuat sepenuhnya. Event ini sudah dijelaskan di bab sintaks jQuery.
click()
Metode click() melampirkan fungsi pengendali kejadian ke elemen HTML.
Fungsi tersebut dijalankan ketika pengguna mengklik elemen HTML.
Contoh berikut mengatakan: Saat event klik diaktifkan pada elemen <p> ; sembunyikan elemen <p> saat ini:
Contoh :
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>Jika di klik, maka text akan hilang.</p> <p>Klik!</p> <p>Klik aku jugaaa!</p> </body> </html>
dblclick()
Metode dblclick() melampirkan fungsi penanganan event ke elemen HTML.
Fungsi ini dijalankan ketika pengguna mengklik dua kali pada elemen HTML:
Contoh
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Jika di double klik, maka text akan hilang.</p>
<p>Klik!</p>
<p>Klik aku jugaaa!</p>
</body>
</html>
mouseenter()
Metode mouseenter() melampirkan fungsi pengendali event ke elemen HTML.
Fungsi ini dijalankan saat penunjuk mouse memasuki elemen HTML:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("kamu menekan enter di p1!");
});
});
</script>
</head>
<body>
<p id="p1">Enter text ini.</p>
</body>
</html>
mouseleave()
Metode mouseleave() melampirkan fungsi pengendali event ke elemen HTML.
Fungsi ini dijalankan saat penunjuk mouse meninggalkan elemen HTML:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("Bye! ini p1!");
});
});
</script>
</head>
<body>
<p id="p1"> Ini paragraph.</p>
</body>
</html>
mousedown()
Metode mousedown() melampirkan fungsi pengendali event ke elemen HTML.
Fungsi dijalankan, ketika tombol kiri, tengah atau kanan mouse ditekan, sedangkan mouse berada di atas elemen HTML:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
});
</script>
</head>
<body>
<p id="p1">Ini paragraph.</p>
</body>
</html>
mouseup()
Metode mouseup() melampirkan fungsi pengendali event ke elemen HTML.
Fungsi dijalankan, ketika tombol kiri, tengah atau kanan dilepaskan, sementara mouse berada di atas elemen HTML:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
});
</script>
</head>
<body>
<p id="p1">Ini paragraph.</p>
</body>
</html>
hover()
Metode hover() mengambil dua fungsi dan merupakan kombinasi dari metode mouseenter() dan mouseleave().
Fungsi pertama dijalankan saat mouse memasuki elemen HTML, dan fungsi kedua dijalankan saat mouse meninggalkan elemen HTML:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">Ini paragraph.</p>
</body>
</html>
fokus()
Metode focus() melampirkan fungsi pengendali event ke bidang formulir HTML.
Fungsi dijalankan saat bidang formulir mendapatkan fokus:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "yellow");
});
$("input").blur(function(){
$(this).css("background-color", "green");
});
});
</script>
</head>
<body>
Nama: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
blur()
Metode blur() melampirkan fungsi penanganan event ke bidang formulir HTML.
Fungsi dijalankan saat bidang formulir kehilangan fokus:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "yellow");
});
$("input").blur(function(){
$(this).css("background-color", "green");
});
});
</script>
</head>
<body>
Nama: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
Metode on()
Metode on() melampirkan satu atau lebih penangan event untuk elemen yang dipilih.
Lampirkan event klik ke elemen <p>:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on("click", function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Jika di klik, maka text akan menghilang.</p>
<p>Klik!</p>
<p>Klik aku jugaaa!</p>
</body>
</html>
Lampirkan beberapa penangan acara ke elemen <p> :
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
</script>
</head>
<body>
<p>Klik atau gerakkan penunjuk mouse ke paragraf ini.</p>
</body>
</html>
