#JQuery - #JQuery Dasar

Belajar JQuery Part 3 : Mengenal Event Pada JQuery

Belajar JQuery Mengenal Event Pada JQuery

Setelah membelajari dasar-dasar JQuery pada tutorial sebelumnya di www.malasngoding.com yaitu tutorial belajar Pengenalan Jquery dasar yang telah membahas tentang pengertian event dan selector pada jquery. silahkan baca tutorial sebelumnya tentang belajar pengenalan jquery dasar di www.malasngoding.com sebelum melanjutkan mempelajari pada tutorial belajar jquery mengenal event pada jquery ini. agar tidak anda lebih mudah memahami penjelasan pada tutorial kali ini.

untuk mengingatkan kembali bayangan tentang pengertian event jquery akan di jelaskan kembali secara singkat. event pada jquery merupakan suatu method atau aksi yang di lakukan pada jquery. seperti contohnya misalnya click() yang berfungsi sebagai event atau method klik yang di lakukan oleh pengguna, dblclick() untuk double click, mouseenter() untuk method saat pengguna meletakkan cursor pada element tertentu, mouseleave() untuk method saat cursor mouse meninggalkan element tertentu dan banyak lagi event jquery lainnya yang akan kita jelaskan di tutorial belajar jquery mengenal event pada jquery ini.

adapun beberapa event jquery adalah sebagai berikut.

Belajar JQuery Mengenal Event Pada JQuery

Event click()

event click() adalah event atau method yang terjadi saat element di klik. perhatikan contoh penggunaan event click() berikut ini. tidak di jelaskan lagi bagaimana cara menghubungkan jquery dengan HTML atau PHP. klik di sini untuk membaca pengertian dan cara menggunakan jquery.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Tutorial belajar JQuery Part 3 : Mengenal Event Pada JQuery</title>

</head>

<body>

<h1>Mengenal Event pada JQuery | www.malasngoding.com</h1>

<button id="tombol">TOMBOL</button>

</body>

$(document).ready(function(){

$('#tombol').click(function(){

$('.box').toggle();

});

</script>

</html>

style.css

body{

font-family: sans-serif;

}

h1{

text-align: center;

}

.box{

height: 300px;

width:300px;

background: orange;

}

#tombol{

padding:10px;

color: #fff;

background: #34495E;

border: none;

}

dapat di lihat pada contoh di atas terdapat sebuah tombol dan sebuah element yang kita bentuk berupa kotak dengan css. dan kita memberkan event click() pada element tombol. yang berarti saat tombol di klik maka akan menghasilkan effect toggle() pada element box.

belajar jquery mengenal event pada jquery

See the Pen jWywvb by Malas Ngoding (@malasngoding) on CodePen.0

Event dblclick()

Sama seperti cara penggunaan event click(). hanya saja event dblclick() adalah sebuah method double click. sehingga effect jquery akan di jalankan jika melakukan double click pada element tersebut. contohnya :

index.html

<!DOCTYPE html>

<html>

<head>

<title>Tutorial belajar JQuery Part 3 : Mengenal Event double click Pada JQuery</title>

</head>

<body>

<h1>Mengenal Event double click pada JQuery | www.malasngoding.com</h1>

<button id="tombol">TOMBOL</button>

</body>

$(document).ready(function(){

$('#tombol').dblclick(function(){

$('.box').toggle();

});

</script>

</html>

style.css

body{

font-family: sans-serif;

}

h1{

text-align: center;

}

.box{

height: 300px;

width:300px;

background: orange;

}

#tombol{

padding:10px;

color: #fff;

background: #34495E;

border: none;

}

See the Pen XXpgPg by Malas Ngoding (@malasngoding) on CodePen.0

Event mouseleave() dan event mouseenter()

event mouseenter() adalah method pada saat cursor mouse di letakkan atau memasuki element dan event mouseleave() adalah event atau method ketika cursor mouse meninggalkan element tertentu. perhatikan contoh berikut ini untuk melihat contoh penggunaan event mouseleave() dan event mouseenter().

index.html

<!DOCTYPE html>

<html>

<head>

<title>Tutorial belajar JQuery Part 3 : Mengenal Event Pada JQuery</title>

</head>

<body>

<h1>Event mouseenter() dan mouseleave() pada JQuery | www.malasngoding.com</h1>

<button id="tombol">TOMBOL</button>

</body>

$(document).ready(function(){

$('#tombol').mouseenter(function(){

$('.box').show();

});

$('#tombol').mouseleave(function(){

$('.box').hide();

});

</script>

</html>

style.css

body{

font-family: sans-serif;

}

h1{

text-align: center;

}

.box{

height: 300px;

width:300px;

background: orange;

display: none;

}

#tombol{

padding:10px;

color: #fff;

background: #34495E;

border: none;

}

perhatikan pada css di atas. kita menetapkan element class box

1	display:none;

sehingga element class box di sembunyikan terlebih dulu. kemudian dengan event mouseenter() kita menampilkan element box.

$('#tombol').mouseenter(function(){

$('.box').show();

});

effect show() adalah effect jquery untuk menampilkan element. jadi pada saat cursor mouse di letakkan pada element tombol maka element box akan di tampilkan. dan saat element tombol di tinggalkan oleh cursor mouse maka element box akan di sembunyikan.

$('#tombol').mouseleave(function(){

$('.box').hide();

});

effect hide() dalah effect jquery untuk menyembunyikan element. silahkan lihat pada contoh berikut ini. letakkan cursor mouse pada tombol(tidak perlu di klik).

See the Pen VePWoq by Malas Ngoding (@malasngoding) on CodePen.0

Adapun event lainnya yang dapat anda coba:

hover() adalah event jquery pada saat posisi hover atau cursor di letakkan pada element.
focus() adalah event jquery pada saat sedang dalam posisi focus.
blur() adalah event jquery pada saat selesai dari posisi focus.

sekian tutorial belajar jquery mengenal event pada jquery.

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.