Sedangkan Jquery Events ini digunakan sebagai alternatif dari penggunaan event pada Javascript. Jika pada postingan yang lain telah dibahas Event Pada Javascript, maka pada pembahasan ini Anda akan mempelajari Event pada Jquery.
Adapun format penulisan event pada Jquery sebagai berikut:
$("selector").nameEvent(function(){
// cara 1
})
$("selector").on("namaEvent", function(){
// cara 2
})Dari contoh format di atas, bisa diterapkan pada contoh program yang akan dibuat. Namun persyaratannya adalah harus menggunakan file JQuery yang bisa didownload di situs resmi JQuery atau bisa menggunakan CDN (Content Delivery Network).
Anda juga bisa download file JQuery yang sudah saya persiapan di sini.
Insya Allah akan Saung IT berikan contoh program secara lengkap di akhir pembahasan. Sekarang akan dibahas satu persatu terlebih dahulu.
Penerapan Click dan Double Click
$("selector").nameEvent(function(){
// cara 1
})
$("selector").on("namaEvent", function(){
// cara 2
})Mouseenter dan Mouseout events
$("#tampil").mouseenter(function(){
$(this).css({
fontSize : "20px",
backgroundColor : "blue",
fontFamily : "Arial"
});
})
$("#tampil").mouseout(function(){
$(this).css({
fontSize : "20px",
backgroundColor : "yellow",
fontFamily : "Calibri"
});
})Focus dan Blur Events
$("#tampil").focus(function(){
$(this).css("background-color", "yellow");
})
$("#tampil").blur(function(){
$(this).css("background-color", "blue");
})Contoh Penerapan Event Pada Program
1# Buat file bernama jq1.html2# Kami menggunakan JQuery local. Jadi, Anda perlu mendownload terlebih dahulu agar program ini bisa berjalan di komputer Anda. Anda juga bisa mengubahnya dengan menggunakan Jquery dari CDN.
3# Ketik script di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Penerapan Event Pada JQuery</title>
<style type="text/css">
#tampil{
width: 200px;
height: 200px;
border: 2px solid #333;
}
</style>
</head>
<body>
<div id="tampil"></div>
<script src="jquery-3.3.1.js"></script>
<script>
// Click
$("#tampil").click(function(){
$(this).css("background-color", "red");
})
// Double Click
$("#tampil").dblclick(function(){
$(this).css("background-color", "purple");
})
// Mouse Enter
$("#tampil").mouseenter(function(){
$(this).css("background-color", "green");
})
// Mouse Out
$("#tampil").mouseout(function(){
$(this).css("background-color", "grey");
})
// Focus
$("#tampil").focus(function(){
$(this).css("background-color", "yellow");
})
// Blurb
$("#tampil").blur(function(){
$(this).css("background-color", "blue");
})
</script>
</body>
</html>Hasil Program:
Salam,
Saung IT
Comments