Event pada javascript adalah sesuatu yang terjadi pada element. Misalnya Kalian memiliki sebuah tombol di halaman website Kalian , dan kita ingin memberikan suatu aksi jika tombol tersebut di klik. jadi yang menjadi event di sini adalah “klik”. misalnya jika tombol di klik maka akan di tampilkan pesan yang menampilkan sebuah text. jadi event nya adalah klik. Sebuah event bisa dipicu oleh browser, bisa juga dipicu oleh pengguna. Kalian bisa menggunakan JavaScript untuk memberikan reaksi tertentu pada sebuah event di halaman web. Show
Kalian telah mengenal elemen-elemen HTML. Adapun jenis-jenis event di HTML antara lain :
Event dapat digunakan untuk untuk menangani, dan memverifikasi, masukan pengguna, tindakan pengguna, dan tindakan browser. Selain itu, event pada Javascript dapat digunakan untuk:
Membuat Event pada JavascriptUntuk contoh saya akan membuat event klik pada sebuah tombol. jadi saya ingin menampilkan sebuah text yang di input melalui form input jika tombol tersebut di klik. < !DOCTYPE html > < script > button.addEventListener('click', function(){ Disini saya membuat tampilan HTML sederhana untuk mendemokan cara menggunakan event javascript, tampilannya seperti dibawah ini. 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 0.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? Cara KerjaKita 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 1 ditekan dapat dilihat pada gambar di bawah ini:Gambar Event Capturing PhaseKetika tombol di atas ditekan, javascript tidak langsung membangkitkan event 0 pada tombol tersebut. Melainkan, javascript membangkitkan event 0 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 0 pertama kali pada 5. Kemudian, event 0 dibangkitkan pada 7, setelah itu 8, dan seterusnya menurun hingga element 9 yang berada di atas element 0. Dan kejadian ini dinamakan sebagai Capture Phase.Nah, kita dapat mendengarkan event 0 ini ketika ia masih dalam fase capture. DEMO:JS Bin<script src="http://static.jsbin.com/js/embed.js"></script> Jadi, kita memanfaatkan metode yang bernama 2 pada suatu element untuk mendengarkan event dari element tersebut:
Bila kita tidak mengisi nilai untuk 8, maka nilai default-nya adalah 2. Ketika 2, maka 5 akan dijalankan pada fase Bubbling. Fase Bubbling akan kita bahas pada bagian berikutnya.Target PhaseBerdasarkan contoh di atas, fase capture hanya berjalan hingga element 9 yang berada tepat di atas element 0. Ketika event 0 dibangkitkan pada element 0, 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 0). .Target Phase Demo<script src="http://static.jsbin.com/js/embed.js"></script> Bubbling PhasePasca event 0 dibangkitkan pada element 0, javascript memulai fase baru, yaitu Bubbling Phase. Fase ini dimulai dari element di atasnya 0, yaitu 9, 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 8 yang bernilai 2.
Object EventSetiap 5 yang dipasang pada sebuah event, akan memperoleh 7. 7 tersebut memiliki properti-properti menarik yang dapat kita manfaatkan untuk merespon sebuah event.Kita ambil contoh pembangkitan event 0 di atas:
Parameter 0 yang diterima oleh 5 di atas memiliki properti sebagai berikut:
Masih ada lebih banyak lagi properti dari parameter 0. Namun tambahan tersebut tergantung dari jenis event yang sedang dibangkitkan.Menghapus Event HandlerUntuk berhenti mendengarkan suatu element, maka kita dapat memanfaatkan metode 3:
stopPropagation & stopImmediatePropagationKita dapat memberhentikan fase dari event dengan menggunakan metode 2 dan 3. Meskipun kegunaannya hampir sama, namun terdapat hal yang membedakannya.Untuk melihat perbedaan antara keduanya, silahkan pembaca melihat demo ini: JS Bin<script src="http://static.jsbin.com/js/embed.js"></script> Jadi, 2 akan memberhentikan fase yang sedang berjalan. Sehingga dalam contoh di atas, event 0 pada 9 tidak dijalankan ketika 0 di tekan. Hal yang sama juga terjadi ketika menggunakan 3.Bedanya adalah, 3 juga memberhentikan 5 yang dipasang untuk mendengarkan event yang sama. Namun, 5 yang diberhentikan hanyalah listener yang dipasang setelah 5 yang menjalankan 3 terpasang.Jadi, dalam contoh di atas, 5 kedua yang dipasang pada 7 tidak dijalankan ketika 7 ditekan. Itu karena 5 pertama menjalankan 3.Sementara itu, 5 kedua pada 2 tetapi dijalankan ketika 2 ditekan. Meskipun 5 pada 2 menjalankan 2.preventDefaultBrowser secara default memiliki reaksi tersendiri ketika suatu element membangkitkan event. Misal, ketika element 7 ditekan, maka browser akan mencoba membuka link pada element tersebut.Bagaimana bila kita ingin agar browser tidak menjalankan reaksi defaultnya? Kita gunakan 7.JS Bin<script src="http://static.jsbin.com/js/embed.js"></script> Konteks Pada ListenerAda yang perlu kita perhatikan ketika menjalankan sebuah 5, yaitu konteks dari fungsi 5 tersebut.Misal, perhatikan demo berikut: JS Bin<script src="http://static.jsbin.com/js/embed.js"></script> Masalahnya adalah, ketika metode 01 dijalankan, scope dari fungsi tersebut bukanlah objek 02, melainkan element 0. Sehingga, 04 bernilai 05. Karena 0 tidak memiliki properti tersebut.Untuk menangani hal tersebut, kita dapat menggunakan pendekatan berikut:
Atau, kita dapat juga menerapkan sebuah metode 07 pada objek 02 di atas. Secara otomatis, nilai dari 09 akan dipasang pada objek yang memiliki metode 07 tersebut.
Membangkitkan Event Menggunakan JavascriptKita dapat membangkitkan suatu event pada suatu element menggunakan javascript. Misal, kita ingin membangkitkan event 0 secara manual:
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 12.TipsEvent DelegationKetika jumlah 5 yang terpasang pada element-element yang berbeda semakin banyak, maka kita berhadapan dengan masalah performa pada browser.Ketika sebuah 5 dipasang pada element-element pada suatu halaman website, maka browser harus menyimpan referensi terhadap 5 tersebut. Yang berarti, bertambahnya memori yang dibutuhkan.Semakin banyak 5 yang dipasang pada element-element pada suatu halaman website, maka browser-pun butuh waktu untuk melakukan pemasangan 17 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<script src="http://static.jsbin.com/js/embed.js"></script> Bila melihat contoh di atas, maka daripada memasang 17 untuk 5 element 19, kita dapat memasang 17 pada element 21. Javascript akan menjalankan 5 (berdasarkan contoh di atas), ketika pembangkitan event berada pada fase bubbling. Demikikanlah contoh penerapan event delegation.Event Handling untuk handling sajaDaripada kita menulis 17 seperti contoh berikut ini:
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 3. Ia akan mendelegasikan tugas "apa yang harus dilakukan ketika button ditekan" pada metode lain.Keuntungan dari pemisahan di atas adalah kita dapat memanfaatkan metode 25 pada tempat lain. Karena ada kemungkinan besar, yang memperoleh manfaat dari keberadaan metode tersebut bukan hanya 5 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. AddEventListener javascript untuk apa?AddEventListener adalah method yang sangat penting dalam JavaScript. Merupakan method yang berfungsi untuk membuat event (click, change, mouseout, dll) untuk keperluan manipulasi DOM. Dalam artikel kali ini, saya akan menunjukan bagaimana cara menggunakannya.
Apakah nama event yang terjadi ketika user meng klik suatu element HTML?OnClick. OnClick adalah suatu kerjadian yang terjadi ketika sebuah elemen html di klik.
|