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 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: Yang
terjadi ketika tombol Gambar Event Ketika tombol di atas ditekan, javascript tidak langsung membangkitkan event Jadi, javascript membangkitkan event Nah, kita dapat mendengarkan event JS Bin<script src="http://static.jsbin.com/js/embed.js"></script> Jadi, kita memanfaatkan metode yang bernama
Bila kita tidak mengisi nilai untuk Target PhaseBerdasarkan contoh di atas, fase capture hanya berjalan hingga element Tetapi, kenyataannya, banyak browser yang menerapkan fase capture hingga element target (dalam contoh kita element Target Phase Demo<script src="http://static.jsbin.com/js/embed.js"></script> Bubbling PhasePasca event 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
Object EventSetiap Kita ambil
contoh pembangkitan event
Parameter
Masih ada lebih banyak lagi properti dari parameter Menghapus Event HandlerUntuk berhenti mendengarkan suatu element, maka kita dapat memanfaatkan metode
stopPropagation & stopImmediatePropagationKita dapat memberhentikan fase dari event dengan
menggunakan metode Untuk melihat perbedaan antara keduanya, silahkan pembaca melihat demo ini: JS Bin<script src="http://static.jsbin.com/js/embed.js"></script> Jadi, Bedanya adalah, Jadi,
dalam contoh di atas, Sementara itu, preventDefaultBrowser secara default memiliki reaksi tersendiri ketika suatu element membangkitkan event. Misal, ketika element Bagaimana bila kita ingin agar browser tidak menjalankan reaksi defaultnya? Kita gunakan JS Bin<script src="http://static.jsbin.com/js/embed.js"></script> Konteks Pada ListenerAda yang perlu kita perhatikan ketika menjalankan sebuah Misal, perhatikan demo berikut: JS Bin<script src="http://static.jsbin.com/js/embed.js"></script> Masalahnya
adalah, ketika metode Untuk menangani hal tersebut, kita dapat menggunakan pendekatan berikut:
Atau, kita dapat juga menerapkan sebuah metode
Membangkitkan Event Menggunakan JavascriptKita dapat membangkitkan suatu event pada suatu element menggunakan javascript. Misal, kita ingin membangkitkan event
Kita juga bisa membuat sebuah event baru: JS Bin<script src="http://static.jsbin.com/js/embed.js"></script> Untuk menambahkan data khusus pada Event Object, kita dapat menambahkannya pada properti TipsEvent DelegationKetika jumlah Ketika sebuah Semakin banyak 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<script src="http://static.jsbin.com/js/embed.js"></script> Bila melihat contoh
di atas, maka daripada memasang Event Handling untuk handling sajaDaripada kita menulis
Ada baiknya kita mengubahnya menjadi:
Alasannya adalah, pertama, kita memisahkan antara penanganan event dengan apa yang seharusnya terjadi ketika event dibangkitkan. Penanganan event hanya mengambil apa element Keuntungan dari pemisahan di atas adalah kita dapat memanfaatkan metode 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. addEventListener Javascript untuk apa?addEventListener adalah method yang sangat penting yang digunakan untuk membuat event seperti klik,dbclick,hover,blur,focus dan lainnya untuk keperluan manipulasi didalam DOM javascript, meskipun sebenarnya banyak cara untuk menjalankan event dengan javascript tapi kali ini kita akan belajar dengan menggunakan method ...
Apa itu Eventlistener?Jawab : Event listener adalah sebuah konsep untuk merespon kegiatan yang terjadi didalam suatuobjek. Event listener merupakan implementasi penyampaian message antar objek. Objek yang mendapat message akan melakukan suatu action yang telah ditentukan didalamprogram.
|