tutorial pengembangan web terbaru
 

jQuery Metode acara

❮ Sebelumnya Berikutnya Bab ❯

jQuery dibuat khusus untuk menanggapi peristiwa di halaman HTML.

Apa Events?

Semua tindakan pengunjung yang berbeda yang halaman web dapat menanggapi disebut peristiwa.

Sebuah acara merupakan saat yang tepat ketika sesuatu terjadi.

contoh:

  • menggerakkan mouse di atas unsur
  • memilih tombol radio
  • klik pada elemen

Istilah "fires/fired" sering digunakan dengan peristiwa. Contoh: "The keypress event dipecat, saat Anda menekan tombol".

Berikut adalah beberapa peristiwa DOM umum:

mouse Acara Keyboard Acara Form Acara Dokumen / Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

jQuery Sintaks Untuk Metode Kegiatan

Dalam jQuery, sebagian besar peristiwa DOM memiliki metode jQuery setara.

Untuk menetapkan acara klik untuk semua paragraf pada halaman, Anda dapat melakukan ini:

$("p").click();

Langkah selanjutnya adalah menentukan apa yang harus terjadi ketika peristiwa kebakaran. Anda harus lulus fungsi untuk acara:

$("p").click(function(){
  // action goes here!!
});

Umumnya Digunakan Metode acara jQuery

$(document).ready()

The $(document).ready() metode memungkinkan kita untuk melaksanakan fungsi ketika dokumen terisi penuh. Acara ini sudah dijelaskan dalam jQuery Sintaks bab.

click()

The click() metode menempel fungsi event untuk elemen HTML.

fungsi ini dijalankan ketika pengguna mengklik pada elemen HTML.

Contoh berikut mengatakan: Ketika klik peristiwa kebakaran pada <p> elemen; menyembunyikan saat <p> elemen:

Contoh

$("p").click(function(){
    $(this).hide();
});
Cobalah sendiri "

dblclick()

The dblclick() metode menempel fungsi event untuk elemen HTML.

Fungsi ini dijalankan ketika pengguna double-klik pada elemen HTML:

Contoh

$("p").dblclick(function(){
    $(this).hide();
});
Cobalah sendiri "

mouseenter()

The mouseenter() metode menempel fungsi event untuk elemen HTML.

Fungsi ini dijalankan ketika pointer mouse memasuki elemen HTML:

Contoh

$("#p1").mouseenter(function(){
    alert("You entered p1!");
});
Cobalah sendiri "

mouseleave()

The mouseleave() metode menempel fungsi event untuk elemen HTML.

Fungsi ini dijalankan ketika pointer mouse meninggalkan elemen HTML:

Contoh

$("#p1").mouseleave(function(){
    alert("Bye! You now leave p1!");
});
Cobalah sendiri "

mousedown()

The mousedown() metode menempel fungsi event untuk elemen HTML.

fungsi ini dijalankan, ketika kiri, tombol tengah mouse atau kanan ditekan, sementara mouse di atas elemen HTML:

Contoh

$("#p1").mousedown(function(){
    alert("Mouse down over p1!");
});
Cobalah sendiri "

mouseup()

The mouseup() metode menempel fungsi event untuk elemen HTML.

fungsi ini dijalankan, ketika meninggalkan, tombol tengah mouse atau kanan dilepaskan, sementara mouse di atas elemen HTML:

Contoh

$("#p1").mouseup(function(){
    alert("Mouse up over p1!");
});
Cobalah sendiri "

hover()

The hover() metode mengambil dua fungsi dan merupakan kombinasi dari mouseenter() dan mouseleave() metode.

Fungsi pertama dieksekusi ketika mouse memasuki elemen HTML, dan fungsi kedua dijalankan ketika mouse meninggalkan elemen HTML:

Contoh

$("#p1").hover(function(){
    alert("You entered p1!");
},
function(){
    alert("Bye! You now leave p1!");
});
Cobalah sendiri "

focus()

The focus() metode menempel fungsi event untuk bidang bentuk HTML.

Fungsi ini dijalankan ketika bidang bentuk mendapat fokus:

Contoh

$("input").focus(function(){
    $(this).css("background-color", "#cccccc");
});
Cobalah sendiri "

blur()

The blur() metode menempel fungsi event untuk bidang bentuk HTML.

fungsi ini dijalankan ketika medan berupa kehilangan fokus:

Contoh

$("input").blur(function(){
    $(this).css("background-color", "#ffffff");
});
Cobalah sendiri "

The on() Method

The on() metode menempel satu atau lebih event handler untuk elemen yang dipilih.

Melampirkan acara klik ke <p> elemen:

Contoh

$("p").on("click", function(){
    $(this).hide();
});
Cobalah sendiri "

Melampirkan beberapa penangan event ke <p> elemen:

Contoh

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    },
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    },
    click: function(){
        $(this).css("background-color", "yellow");
    }
});
Cobalah sendiri "

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »

Metode Kegiatan jQuery

Untuk jQuery referensi acara penuh, silahkan pergi ke kami Events Referensi jQuery .


❮ Sebelumnya Berikutnya Bab ❯