Event-Event Dasar JQuery

Tabel Konten
  1. Event-Event Dasar 
    1. click() 
    2. dblclick() 
    3. focus() 
    4. mouseover() 
    5. mouseout() 
    6. mouseenter() 
    7. mouseleave() 
    8. hover() 
    9. scroll() 
    10. select() 
  2. Lebih Lengkap: 
event-event jquery

Sebenarnya ada begitu banyak jenis event dalam , namun di sini Saya hanya ingin memperkenalkan event-event yang paling umum dan paling banyak digunakan untuk memicu efek animasi saja. Sedangkan untuk event-event yang lainnya suatu saat akan Saya jelaskan secara terpisah apabila Saya telah mendapatkan contoh penerapan yang tepat.

Secara umum, penulisan event dalam JQuery dapat dituliskan seperti ini:

$(pemicu).nama_event(function() {
    //Peristiwa...
});
  • Pemicu: adalah elemen yang akan menimbulkan aksi apabila dikenai event
  • .nama_event: adalah event (perintah) yang akan diberikan pada elemen pemicu
  • Peristiwa: adalah peristiwa yang akan terjadi apabila pemicu telah mendapatkan perintah.

Sebagai contoh, kita buat sebuah skenario: “Ada sebuah tombol yang mengandung atribut berupa class='subjek' dan sebuah area yang mengandung atribut id='area'. Apabila tombol tersebut diklik, maka area akan memudar perlahan kemudian menghilang (fadeOut)”

Jika dituliskan dalam bahasa JQuery, maka akan menghasilkan kalimat seperti ini:

$('.subjek').click(function() {
    $('#area').fadeOut();
});

Dan ini adalah bentuk elemennya:

<button class='subjek'>Pencet!</button>
<div id='area'>Konten</div>

Event-Event Dasar 

.click() 

Digunakan untuk menimbulkan peristiwa berdasarkan aksi klik pada subjek/pemicu.

$('.subjek').click(function() {
    $('#area').fadeOut();
});

.dblclick() 

Digunakan untuk menimbulkan peristiwa berdasarkan aksi klik ganda pada subjek/pemicu.

$('.subjek').dblclick(function() {
    $('#area').fadeOut();
});

.focus() 

Digunakan untuk menimbulkan peristiwa berdasarkan aksi fokus pada subjek/pemicu (dikhususkan pada elemen-elemen berupa <input> dan <textarea>).

$('.subjek').focus(function() {
    $('#area').fadeOut();
});

.mouseover() 

Digunakan untuk menimbulkan peristiwa berdasarkan aksi kedatangan pointer mouse di atas subjek/pemicu baik pada elemen induk maupun anak-anak elemennya.

$('.subjek').mouseover(function() {
    $('#area').fadeOut();
});

.mouseout() 

Digunakan untuk menimbulkan peristiwa berdasarkan aksi kepergian pointer mouse dari atas subjek/pemicu baik pada elemen induk maupun anak-anak elemennya.

$('.subjek').mouseout(function() {
    $('#area').fadeOut();
});

.mouseenter() 

Mirip dengan .mouseover(), digunakan untuk menimbulkan peristiwa berdasarkan aksi kedatangan pointer mouse di atas subjek/pemicu. Namun saat pointer mouse sudah memasuki elemen induk (.mouseover()) dan kemudian pointer mendatangi anak-anak elemen di dalamnya, itu tidak masuk hitungan .mouseenter() untuk yang ke sekian kalinya.

$('.subjek').mouseenter(function() {
    $('#area').fadeOut();
});

.mouseleave() 

Mirip dengan .mouseout(), digunakan untuk menimbulkan peristiwa berdasarkan aksi kepergian pointer mouse dari subjek/pemicu. Namun saat pointer mouse meninggalkan sebuah anak elemen (dan masih dalam elemen induk), itu tidak bisa disebut sebagai .mouseleave(), hingga ketika pointer benar-benar telah keluar dari elemen induk, barulah bisa disebut sebagai .mouseleave() (.mouseleave() terhadap elemen induk)

$('.subjek').mouseleave(function() {
    $('#area').fadeOut();
});

.hover() 

.hover() merupakan gabungan antara event .mouseenter() dan .mouseleave(). Susunan event .hover() juga merupakan penggabungan antara .mouseenter() dan .mouseleave() seperti ini:

.mouseenter() dan .mouseleave().hover()
$('.subjek').mouseenter(function() {
    $('#area').fadeOut();
});
$('.subjek').mouseleave(function() {
    $('#area').fadeIn();
});
$('.subjek').hover(function() {
    $('#area').fadeOut();
}, function() {
    $('#area').fadeIn();
});

.scroll() 

Digunakan untuk menimbulkan peristiwa berdasarkan aksi scroll pada area yang menjadi subjek/pemicu peristiwa (dikhususkan pada area-area yang mengandung scroll bar).

$('.subjek').scroll(function() {
    $('#area').fadeOut();
});

.select() 

Digunakan untuk menimbulkan peristiwa berdasarkan aksi seleksi pada subjek/pemicu (dikhususkan pada elemen-elemen berupa <input> dan <textarea>).

$('.subjek').select(function() {
    $('#area').fadeOut();
});

Lihat Demo

Lebih Lengkap: 

13 Komentar

  • Unknown

    wah lumayan mengerti, nih makasih, perbanyak lagi gan artikel ttg jquery soalnya masih penasaran dengan jquery

  • Unknown

    Thanks mas... Ini baru namanya Tutorial..... bnar-bnar dijelaskan secara mendasar

  • Taufik Nurrohman

    @Dadang: Sama-sama..

  • ricco

    Demonya kerend kawand sumpah.. :-bd

  • Unknown

    bagus bos, tapi gimana cara nempatin code effectnya dan gimana cara membuat effect memanjang gitu ???

  • Taufik Nurrohman

  • Unknown

    @Taufik Nurrohman thanks ya mas buat pengetahuannya !! :-bd

  • Unknown

    kang klw script iklan popads dia eksekusi run nya tuh berdasarkan apa ya?
    saya pingin rubah jadi event .click() berdararkan div class .closeDisini bisa nga kang,,udah dicoba cuma nga jalan :(

    ini contohnya kang mohon koreksinya :D

    $(document).ready(function(){
    $(".closeDisini").click(function(){
    var _pop = _pop || [];
    _pop.push(['siteId', 12345]);
    _pop.push(['minBid', 0.0000]);
    _pop.push(['popundersPerIP', 0]);
    _pop.push(['delayBetween', 0]);
    _pop.push(['default', false]);
    _pop.push(['defaultPerDay', 0]);
    _pop.push(['topmostLayer', false]);
    (function() {
    var pa = document.createElement('script'); pa.type = 'text/javascript'; pa.async = true;
    pa.src = 'http://world.popadscdn.net/pop.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(pa, s);
    })();
    });
    });

    • Taufik Nurrohman

      Coba keluarkan pemuat script eksternalnya dari .click() supaya semua kebutuhan iklannya bisa dimuat terebih dahulu tanpa harus memperlihatkan iklannya:

      $(document).ready(function() {
      $(".closeDisini").click(function() {
      var _pop = _pop || [];
      _pop.push(['siteId', 12345]);
      _pop.push(['minBid', 0.0000]);
      _pop.push(['popundersPerIP', 0]);
      _pop.push(['delayBetween', 0]);
      _pop.push(['default', false]);
      _pop.push(['defaultPerDay', 0]);
      _pop.push(['topmostLayer', false]);
      });
      });
      (function() {
      var pa = document.createElement('script');
      pa.type = 'text/javascript';
      pa.async = true;
      pa.src = 'http://world.popadscdn.net/pop.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(pa, s);
      })();
      • Unknown

        hehe,,nga bisa kang, apa berupa script pop ya??
        cuma sudah saya akali dengan if condition statment, beres sudah

        mau keliling2 lagi nih di blog kang rohman, cari inspirasi script yg berguna buat di praktekin,,

        makasih :D

  • Anonim

    makasih mas, tutornya membantu banget..
    sekalian mw nanya nih mas..
    waktu implementasi tutor ini, fungsi2 event sy letakkan di 1 halaman yang sama dengan tag2 form sebagai objek pemicu.
    nah saya bingung ketika saya mencoba meletakkan tag2 form di halaman terpisah dan saya akses melalui fungsi ajax(), pemanggilan event nya tidak berjalan.. bisa di bantu mas kurangnya dimana?

    contoh:

    file index.html

    <html>
    <head>
    <script src="js/jquery-1.10.2.js"></script>
    <script>
    function halaman(halaman){
    $.ajax({
    //Alamat url harap disesuaikan dengan lokasi script pada komputer anda
    url         : 'content.php',
    type     : 'POST',
    dataType : 'html',
    data     : sub='+halaman,
    success  : function(jawaban){
    $('#content #right').html(jawaban);
    },
    })
    }
    $(document).ready(function(){
    $('#button').click(function() {
    alert('Anda telah meng-klik tombol ini,')
    });
    });
    </script>
    </head>
    <body onload="halaman('1');">
    <div id="content">
    <div id="left">
    <ul>
    <li><a name="#1" onclick="halaman('1');">halaman 1</a></li>
    </ul>
    </div>
    <div id="right">
    </div>
    </div>
    </body>
    </html>

    halaman content.php
    ";
    ?>

    • Taufik Nurrohman

      type: 'POST' itu kalau mengirimnya melalui formulir (AJAX formulir). Bagian itu dibuang saja.

  • Unknown

    bagus.. menarik.. dan bahasa indonesia

Komentar telah ditutup.