Setiap kerangka kerja JavaScript mengimplementasikan penanganan peristiwa lintas-browser, mendorong Anda untuk beralih dari penambahan peristiwa sebaris gaya lama dan menggunakan pendekatan linier yang disederhanakan. Lihatlah contoh jQuery di Listing 6 yang menggunakan acara hover untuk menyorot elemen div.
Listing 6: Melampirkan acara hover menggunakan jQuery
$('#kotak').hover(fungsi() {
$(ini).addClass('sorot');
}, fungsi() {
$(ini).removeClass('sorot');
});
Ini adalah acara khusus jQuery, dan Anda akan menemukan bahwa ini menyediakan dua fungsi. Fungsi pertama dipanggil saat event onMouseOver diaktifkan, dan fungsi kedua dipanggil saat event onMouseOut diaktifkan. Hal ini karena tidak ada acara DOM standar untuk hover. Mari kita lihat kejadian yang lebih umum seperti klik (lihat Listing 7):
Listing 7: Melampirkan acara klik menggunakan jQuery
$('#tombol').klik(fungsi() {
alert('Anda menekan tombolnya!');
});
Seperti yang Anda lihat, hanya ada satu parameter fungsi dalam instance. Kebanyakan event di jQuery ditangani dengan cara yang sama, menggunakan event handler di jQuery, konteksnya mengacu pada objek mana yang memicu event tersebut. Beberapa kerangka kerja tidak bekerja dengan cara ini. Dalam kasus Prototipe, kode di Listing 7 terlihat seperti Listing 8.
Listing 8: Melampirkan peristiwa klik menggunakan Prototipe
$('tombol-nya').observe('klik', function(e) {
alert('Anda menekan tombolnya!');
});
Hal pertama yang akan Anda perhatikan adalah tidak ada fungsi klik, melainkan fungsi observasi yang menerima parameter peristiwa sebelum mereferensikan dirinya sendiri. Anda juga akan melihat bahwa fungsi tersebut menerima parameter e, yang konteksnya mengacu pada elemen yang memicu peristiwa tersebut. Untuk melihat cara kerjanya, mari kita tulis ulang kode di Listing 6 menggunakan Prototype (lihat Listing 9).
Listing 9: Melampirkan acara hover menggunakan Prototipe
$('kotak').observe('mouseover', function(e) {
var el = Peristiwa.elemen(e);
el.addClassName('sorot');
});
$('kotak').observe('mouseout', function(e) {
var el = Peristiwa.elemen(e);
el.removeClassName('sorot');
});
jQuery juga berbeda, Anda hanya perlu menggunakan fungsi $ untuk mendapatkan variabel konteks, sedangkan pustaka Prototipe menggunakan fungsi Event.element(). Selain itu, Anda memperhatikan bahwa Anda perlu memisahkan peristiwa mouseover dan mouseout.
Melalui beberapa tutorial di artikel ini, Anda dapat melihat bahwa fungsi dibuat secara inline dan tidak diberi nama. Ini berarti tidak dapat digunakan kembali, dan contoh hover Prototipe juga memberi kita kesempatan untuk melihat cara menggunakan fungsi bernama. Daftar 10 mengilustrasikan metode ini.
Listing 10: Meningkatkan acara hover menggunakan Prototipe
Anda akan melihat bahwa saat ini Anda hanya perlu mendefinisikan satu fungsi. Ini dipanggil oleh event mouseover dan mouseout. Fungsi ini menentukan apakah suatu elemen memiliki nama kelas "highlight", dan menambahkan atau menghapusnya berdasarkan hasilnya. Anda juga akan melihat bahwa parameter e diteruskan secara implisit. Dengan kata lain, Anda memberikan argumen ambigu ke fungsi observasi.
Alamat cetak ulang: http://www.denisdeng.com/?p=720
Alamat asli: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html
fungsi beralihKelas(e) {
var el = Peristiwa.elemen(e);
if(el.hasClassName('highlight'))
baris.removeClassName('highlight');
kalau tidak
baris.addClassName('highlight');
}
$('kotak').observe('mouseover', toggleClass);
$('kotak').observe('mouseout', toggleClass);