Event adalah salah satu bagian yang sangat penting dari suatu aplikasi web. Setiap element pada sebuah halaman website dapat membangkitkan event. Tetapi apa yang penting dari kemampuan tersebut?
Event biasanya dibangkitkan ketika suatu element telah mengalami perubahan kondisi. Misalnya, kita ingin memperbesar sebuah gambar yang ditekan oleh user.
Bagaimana caranya
kita mengetahui bahwa sebuah gambar telah ditekan oleh user? Caranya adalah dengan memanfaatkan event yang dibangkitkan oleh gambar tersebut ketika ia menerima tekanan, yaitu event click.
Tentu masih banyak lagi event lain yang dapat dibangkitkan oleh element-element tertentu pada sebuah halaman website. Misalnya ada event yang menandakan bahwa suatu element telah mengalami perubahan ukuran. Ada event yang menandakan bahwa suatu element sedang dipindahkan oleh pengguna. Ada
juga event yang mendandakan bahwa tetikus yang digunakan oleh pengguna sedang berpindah tempat.
Jadi, apa itu event? Dan bagaimana cara kerjanya?
Kita ambil kasus dimana user telah menekan sebuah tombol. Ketika sebuah tombol ditekan, ada beberapa hal yang terjadi. Memahami kejadian ini dapat membantu kita untuk merespon dengan benar ketika sebuah event dibangkitkan.
Anggap saja kode html kita seperti berikut ini:
Event
Yang
terjadi ketika tombol ditekan dapat dilihat pada gambar di bawah ini:
Gambar Event
Capturing Phase
Ketika tombol di atas ditekan, javascript tidak langsung membangkitkan event click pada tombol tersebut. Melainkan, javascript membangkitkan event click secara berurutan berdasarkan struktur DOM. Mulai dari
objek DOM paling tinggi dan kemudian menurun hingga sampai pada tombol yang benar-benar ditekan tadi.
Jadi, javascript membangkitkan event click pertama kali pada window. Kemudian, event click dibangkitkan pada document, setelah itu html, dan seterusnya menurun hingga element div yang berada di atas element button. Dan kejadian ini dinamakan sebagai Capture Phase.
Nah, kita dapat mendengarkan event click ini ketika ia masih dalam
fase capture. DEMO:
JS Bin
Jadi, kita memanfaatkan metode yang bernama addEventListener pada suatu element untuk mendengarkan event dari element tersebut:
tipeEvent: adalah event yang dibangkitkan (dalam contoh di atas, tipe Event adalah "click")
listener: metode yang akan dijalankan ketika event tipeEvent dibangkitkan pada target
useCapture: bila bernilai true, maka listener akan dijalankan pada fase Capture.
Bila kita tidak mengisi nilai untuk useCapture, maka nilai default-nya adalah false. Ketika false, maka listener akan dijalankan pada fase
Bubbling. Fase Bubbling akan kita bahas pada bagian berikutnya.
Target Phase
Berdasarkan contoh di atas, fase capture hanya berjalan hingga element div yang berada tepat di atas element button. Ketika event click dibangkitkan pada element button, fasenya sudah berubah menjadi Target Phase. Ini mendandakan bahwa event telah berada tepat di-element yang mengalami interaksi (dalam contoh kita element yang ditekan oleh pengguna).
Tetapi, kenyataannya, banyak browser yang menerapkan fase capture hingga element target (dalam contoh kita element button). Ini adalah sebuah quirk, atau kejanggalan.
Target Phase Demo
Bubbling Phase
Pasca event click dibangkitkan pada element button, javascript memulai fase baru, yaitu Bubbling Phase. Fase ini dimulai dari element di atasnya button, yaitu div, hingga ke element paling atas.
Jadi, fase Bubbling adalah kebalikan dari fase
Capture. Tetapi bagaimana dengan sintaks untuk mendengarkan event pada fase Bubbling ini?
Secara sintaksis, perbedaan antara fase Bubbling hanyalah pada parameter useCapture yang bernilai false.
document.addEventListener("click", function() {
console.log("document: fase bubbling: click");
}, false);
Object Event
Setiap listener yang dipasang pada sebuah event, akan memperoleh Event Object. Event Object tersebut memiliki properti-properti menarik yang dapat kita manfaatkan untuk merespon sebuah event.
Kita ambil
contoh pembangkitan event click di atas:
var tombol = document.getElementsByTagName("button")[0];
tombol.addEventListener("click", function( e ) {
}, false);
Parameter e yang diterima oleh listener di atas memiliki properti sebagai berikut:
type (String): tipe dari event yang dibangkitkan
target (Node): DOM Node dimana event berasal (dalam contoh kita di atas adalah button)
currentTarget (Node): DOM Node dimana event saat ini sedang dibangkitkan (silahkan lihat kembali 3 fase di atas)
bubbles (Boolean): apakah saat ini kita
berada pada fase bubbling?
preventDefault (Function): kita dapat memanfaatkan properti ini untuk membatalkan respon default dari user ketika target mengalami event type. Misalnya ketika suatu url ditekan oleh pengguna, maka respon default-nya adalah membuka link tersebut. Namun kita dapat membatalkan respon tersebut dengan menggunakan properti preventDefault ini.
stopPropagation (Function): Memberhentikan fase yang sedang terjadi.
stopImmediatePropagation
(Function): Hampir sama seperti stopPropagation di atas. Perbedaannya akan kita bahas nantinya.
cancelable (Boolean): mendakan apakah preventDefault bisa dijalankan atau tidak.
defaultPrevented (Boolean): menandakan apakah preventDefault telah dijalankan.
isTrusted (Boolean): menandakan bahwa event dibangkitkan oleh browser, bukan secara manual melalui javascript.
eventPhase (Number): menandakan fase aktif yang sedang terjadi: (0) capture, (1) target, (2) bubbling.
timestamp (Number):
waktu yang menandakan kapan event terjadi.
Masih ada lebih banyak lagi properti dari parameter e. Namun tambahan tersebut tergantung dari jenis event yang sedang dibangkitkan.
Menghapus Event Handler
Untuk berhenti mendengarkan suatu element, maka kita dapat memanfaatkan metode removeEventListener:
Kita dapat memberhentikan fase dari event dengan
menggunakan metode stopPropagation dan stopImmediatePropagation. Meskipun kegunaannya hampir sama, namun terdapat hal yang membedakannya.
Untuk melihat perbedaan antara keduanya, silahkan pembaca melihat demo ini:
JS Bin
Jadi, stopPropagation akan memberhentikan fase yang sedang berjalan. Sehingga dalam contoh di atas, event click pada div tidak dijalankan ketika button di tekan. Hal yang sama juga terjadi ketika menggunakan stopImmediatePropagation.
Bedanya adalah, stopImmediatePropagation juga memberhentikan listener yang dipasang untuk mendengarkan event yang sama. Namun, listener yang diberhentikan hanyalah listener yang dipasang setelah listener yang menjalankan stopImmediatePropagation terpasang.
Jadi,
dalam contoh di atas, listener kedua yang dipasang pada button-dua tidak dijalankan ketika button-dua ditekan. Itu karena listener pertama menjalankan stopImmediatePropagation.
Sementara itu, listener kedua pada button-satu tetapi dijalankan ketika button-satu ditekan. Meskipun listener pada button-satu menjalankan stopPropagation.
preventDefault
Browser secara default memiliki reaksi tersendiri ketika suatu element membangkitkan event. Misal, ketika element a
ditekan, maka browser akan mencoba membuka link pada element tersebut.
Bagaimana bila kita ingin agar browser tidak menjalankan reaksi defaultnya? Kita gunakan preventDefault.
JS Bin
Konteks
Pada Listener
Ada yang perlu kita perhatikan ketika menjalankan sebuah listener, yaitu konteks dari fungsi listener tersebut.
Misal, perhatikan demo berikut:
JS Bin
Masalahnya
adalah, ketika metode orang.getName() dijalankan, scope dari fungsi tersebut bukanlah objek orang, melainkan element button. Sehingga, this.name bernilai undefined. Karena button tidak memiliki properti tersebut.
Untuk menangani hal tersebut, kita dapat menggunakan pendekatan berikut:
Atau, kita dapat juga menerapkan sebuah metode handleEvent pada objek orang di atas. Secara otomatis, nilai dari this akan dipasang pada objek yang memiliki metode
handleEvent tersebut.
Kita dapat membangkitkan suatu event pada suatu element menggunakan javascript.
Misal, kita ingin membangkitkan event click secara manual:
button.dispatchEvent(new Event("click"));
Kita juga bisa membuat sebuah event baru:
JS Bin
Untuk menambahkan data khusus pada Event Object, kita dapat menambahkannya pada properti detail.
Tips
Event Delegation
Ketika jumlah listener yang terpasang pada element-element yang berbeda semakin banyak, maka kita berhadapan dengan masalah performa pada
browser.
Ketika sebuah listener dipasang pada element-element pada suatu halaman website, maka browser harus menyimpan referensi terhadap listener tersebut. Yang berarti, bertambahnya memori yang dibutuhkan.
Semakin banyak listener yang dipasang pada element-element pada suatu halaman website, maka browser-pun butuh waktu untuk melakukan pemasangan event listener tersebut.
Untuk mengurangi beban, kita dapat menggunakan event delegation.
Caranya adalah dengan memanfaatkan fase Bubbling yang akan dilalui oleh event ketika suatu event dibangkitkan. Berikut adalah demo dari penerapan event delegation.
JS Bin
Bila melihat contoh
di atas, maka daripada memasang event listener untuk 5 element li, kita dapat memasang event listener pada element ul. Javascript akan menjalankan listener (berdasarkan contoh di atas), ketika pembangkitan event berada pada fase bubbling. Demikikanlah contoh penerapan event delegation.
Event Handling untuk handling saja
Daripada kita menulis event listener seperti contoh berikut ini:
button.addEventListener("click", function( e ) {
var target = e.target;
target.classList.add("highlight");
});
Ada baiknya kita mengubahnya menjadi:
button.addEventListener("click", function( e ) {
var target = e.target;
addHighlighter(target);
});
function addHighlighter( el ) {
el.classList.add("highlight");
}
Alasannya adalah, pertama, kita memisahkan antara penanganan event dengan apa yang seharusnya terjadi ketika event dibangkitkan. Penanganan event hanya mengambil apa element target. Ia akan mendelegasikan tugas "apa yang harus dilakukan ketika button ditekan" pada metode lain.
Keuntungan dari pemisahan di atas adalah kita dapat memanfaatkan metode addHighlighter pada tempat lain. Karena ada kemungkinan besar, yang memperoleh manfaat dari keberadaan metode tersebut bukan
hanya listener di atas saja.
Alasan kedua, kita dapat lebih mudah menguji respon terhadap suatu event tanpa harus mensimulasikan pembangkitan event tersebut pada unit test kita. Jadi, unit test kita akan menjadi lebih sederhana.
Jelaskan apa itu event pada JavaScript?
Pada Javascript: Event adalah kejadian yang terjadi di halaman web. Kejadian yang dimaksud di sini seperti aktivitas yang dikerjakan pada halaman web.
Apa fungsi dari event OnClick?
Fungsi Onclick event ini adalah memungkinkan Anda menjalankan kode saat pengguna mengklik tombol atau elemen lain di halaman web Anda. Onclick adalah jenis event JavaScript. Peristiwa adalah tindakan yang terjadi di browser yang dapat dimulai oleh pengguna atau browser itu sendiri.
2 Apakah nama event yang terjadi ketika user mengklik suatu element HTML?
onclick = adalah event jika sebuah element html di klik.
Apa yang dimaksud dengan event dan event handler?
Event Handler merupakan sebuah prosedur dalam rangkaian kode yang menangani sebuah aktivitas ketika peristiwa ( Event ) terjadi saat program dalam kondisi Runtime.