Hallo sobat Webhozz jumpa lagi dengan saya, kali ini saya ingin berbagi artikel tentang event recognition di JavaScript. Agar sobat Webhozz tidak bingung, mari masuk ke pembahasan artikel sobat Webhozz
Peristiwa adalah sesuatu yang terjadi dalam elemen HTML. Suatu peristiwa dapat dipicu oleh browser, juga dapat dipicu oleh pengguna. Anda dapat menggunakan JavaScript untuk memberikan reaksi spesifik terhadap suatu peristiwa di halaman web
Contoh pemakaian event telah kalian kenal pada latihan awal, yaitu event title yang ada di tag . Kegunaannya untuk menjalankan sebuah script fungsi JavaScript saat tombol di-klik.
Melalui mekanisme yang sama, Anda dapat menerapkan kode JavaScript ke elemen HTML lain dan ke acara lainnya. Sintaks
Anda sudah mengetahui elemen-elemen HTML. Adapun jenis-jenis event pada HTML antara lain
- Onmouseover. ketika pengguna mengarahkan pointer pada elemen HTML
- Klik. ketika pengguna mengklik elemen HTML
- Onmouseout. ketika pengguna memindahkan penunjuk dari elemen HTML (kebalikan dari onmouseover)
- Onkeydown. ketika pengguna menekan tombol pada keyboard
- Dalam perubahan. ketika elemen HTML telah berubah
- Muat. saat browser selesai memuat halaman web
Nah Sobat Webhozz, itulah pembahasan singkat tentang pengenalan event di JavaScript. Semoga pembahasan artikel ini dapat membantu sobat Webhozz semua dalam belajar JavaScript, dan juga dapat menambah pengetahuan sobat Webhozz semua. Sampai jumpa lagi pada pembahasan artikel lainnya yang tentunya lebih menarik
Acara adalah salah satu bagian terpenting dari aplikasi web. Setiap elemen di halaman situs web dapat memicu suatu peristiwa. Tapi apa pentingnya kemampuan?
Event biasanya dimunculkan ketika sebuah elemen telah mengalami perubahan kondisi. Misalnya kita ingin memperbesar gambar yang ditekan oleh pengguna
Bagaimana kita tahu bahwa gambar telah diklik oleh pengguna?
Tentu masih banyak event lain yang bisa dimunculkan oleh elemen tertentu di halaman website. Misalnya, ada suatu peristiwa yang menunjukkan bahwa suatu unsur telah mengalami perubahan ukuran. Ada peristiwa yang menunjukkan bahwa suatu elemen sedang dipindahkan oleh pengguna. Ada juga event yang menandakan bahwa mouse yang digunakan user sedang bergerak
Jadi, apa itu acara?
Cara kerja
Mari kita ambil kasus di mana pengguna menekan sebuah tombol. Ketika sebuah tombol ditekan, beberapa hal terjadi. Memahami event ini dapat membantu kita untuk merespon dengan benar ketika sebuah event dimunculkan
Mari kita asumsikan kode html kita adalah sebagai berikut
<html> <head> <meta charset="UTF-8"> <title>Event</title> </head> <body> <div> <button>Tekan Saya</button> </div> </body> <html> _Apa yang terjadi ketika tombol target.addEventListener(tipeEvent, listener [, useCapture]); 1 ditekan dapat dilihat pada gambar di bawah ini
Gambar acara
Fase Penangkapan
Saat tombol diatas ditekan, javascript tidak langsung memunculkan event target.addEventListener(tipeEvent, listener [, useCapture]); 0 pada tombol. Jika tidak, javascript memunculkan acara target.addEventListener(tipeEvent, listener [, useCapture]); _0 secara berurutan berdasarkan struktur DOM. Mulai dari objek DOM tertinggi lalu turun hingga mencapai tombol yang sebenarnya ditekan tadi
Jadi, javascript memunculkan acara target.addEventListener(tipeEvent, listener [, useCapture]); _0 untuk pertama kalinya pada target.addEventListener(tipeEvent, listener [, useCapture]); 5. Kemudian, acara target.addEventListener(tipeEvent, listener [, useCapture]); 0 dimunculkan pada target.addEventListener(tipeEvent, listener [, useCapture]); 7, setelah itu target.addEventListener(tipeEvent, listener [, useCapture]); 8, dan selanjutnya ke elemen target.addEventListener(tipeEvent, listener [, useCapture]); 9 yang berada di atas elemen document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0. Dan peristiwa ini disebut Fase Penangkapan
Nah, event target.addEventListener(tipeEvent, listener [, useCapture]); _0 ini bisa kita dengarkan saat masih dalam tahap capture. DEMO
JS Bin
Jadi, kami menggunakan metode yang disebut document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _2 pada elemen untuk mendengarkan acara dari elemen itu
target.addEventListener(tipeEvent, listener [, useCapture]);- document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _3. adalah elemen yang memunculkan peristiwa tersebut
- document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _4. adalah event yang dimunculkan (pada contoh diatas, Event typenya adalah "klik")
- document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5. metode yang akan dilakukan pada saat event document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 4 dimunculkan pada document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 3
- document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _8. ketika nilainya document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _9, maka document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 akan dijalankan pada fase Capture
Jika kita tidak mengisi nilai untuk document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 8, maka nilai defaultnya adalah var tombol = document.getElementsByTagName("button")[0]; tombol.addEventListener("click", function( e ) { }, false); 2. Ketika var tombol = document.getElementsByTagName("button")[0]; tombol.addEventListener("click", function( e ) { }, false); _2, maka document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 akan dilakukan pada fase Bubbling. Kami akan membahas fase menggelegak di bagian selanjutnya
Fase Sasaran
Berdasarkan contoh di atas, tahap penangkapan hanya berjalan sampai elemen target.addEventListener(tipeEvent, listener [, useCapture]); 9 yang berada tepat di atas elemen document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0. Saat peristiwa target.addEventListener(tipeEvent, listener [, useCapture]); _0 dimunculkan pada elemen document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0, fase telah berubah menjadi Fase Target. Ini berarti bahwa acara tersebut telah ditempatkan tepat pada elemen yang mengalami interaksi (dalam contoh kita, elemen yang ditekan oleh pengguna)
Namun, pada kenyataannya, banyak browser menerapkan fase penangkapan ke elemen target (dalam elemen contoh kami document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0).
Target Phase Demo
Fase Gelembung
Setelah event target.addEventListener(tipeEvent, listener [, useCapture]); _0 dimunculkan pada elemen document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0, javascript memulai fase baru yaitu Fase Bubbling. Fase ini dimulai dari elemen di atasnya document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _0, yaitu target.addEventListener(tipeEvent, listener [, useCapture]); 9, hingga elemen teratas
Jadi, fase Bubbling adalah kebalikan dari fase Capture. Tapi bagaimana dengan sintaks untuk mendengarkan acara di fase Bubbling ini?
Secara sintaksis, perbedaan fase Bubbling hanya pada parameter document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 8 yang memiliki nilai var tombol = document.getElementsByTagName("button")[0]; tombol.addEventListener("click", function( e ) { }, false); 2
document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false);Peristiwa Objek
Setiap document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5 dipasang pada suatu acara, akan mendapatkan var tombol = document.getElementsByTagName("button")[0]; function callback() { console.log("#tombol ditekan"); } // memasang event handler tombol.addEventListener("click", callback, false); // melepas event handler tombol.removeEventListener("click", callback, false); 7. var tombol = document.getElementsByTagName("button")[0]; function callback() { console.log("#tombol ditekan"); } // memasang event handler tombol.addEventListener("click", callback, false); // melepas event handler tombol.removeEventListener("click", callback, false); _7 memiliki properti menarik yang dapat kita gunakan untuk menanggapi suatu peristiwa
Mari kita ambil contoh menghasilkan acara target.addEventListener(tipeEvent, listener [, useCapture]); 0 di atas
var tombol = document.getElementsByTagName("button")[0]; tombol.addEventListener("click", function( e ) { }, false);Parameter button.addEventListener("click", function() { orang.getName(); }); 0 diterima oleh document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 di atas memiliki properti berikut
- button.addEventListener("click", function() { orang.getName(); }); _2 (Tali). jenis acara yang diangkat
- document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _3 (Simpul). DOM Node tempat kejadian berasal (dalam contoh kami di atas adalah document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0)
- button.addEventListener("click", function() { orang.getName(); }); _5 (Simpul). DOM Node tempat event sedang dimunculkan (silakan lihat kembali 3 fase di atas)
- button.addEventListener("click", function() { orang.getName(); }); _6 (Boolean). apakah kita saat ini sedang dalam fase menggelegak?
- button.addEventListener("click", function() { orang.getName(); }); _7 (Fungsi). kita dapat memanfaatkan properti ini untuk membatalkan respons default dari pengguna ketika document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 3 mengalami peristiwa button.addEventListener("click", function() { orang.getName(); }); 2. Misalnya, saat var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); _0 ditekan oleh pengguna, respons default adalah membuka tautan. Tetapi kita dapat membatalkan tanggapan dengan menggunakan properti button.addEventListener("click", function() { orang.getName(); }); 7 ini
- var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 2 (Fungsi). Hentikan fase saat ini
- var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 3 (Fungsi). Hampir sama dengan var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); _2 di atas. Kita akan membahas perbedaannya nanti
- var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 5 (Boolean). menentukan apakah button.addEventListener("click", function() { orang.getName(); }); _7 dapat dilaksanakan atau tidak
- var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 7 (Boolean). menunjukkan apakah button.addEventListener("click", function() { orang.getName(); }); _7 telah dilakukan
- var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 9 (Boolean). menunjukkan bahwa acara tersebut dimunculkan oleh browser, bukan secara manual melalui javascript
- button.dispatchEvent(new Event("click")); 0 (Nomor). menunjukkan fase aktif yang sedang berlangsung. (0) tangkap, (1) sasaran, (2) menggelegak
- button.dispatchEvent(new Event("click")); _1 (Nomor). waktu yang menunjukkan kapan peristiwa itu terjadi
Masih ada lebih banyak properti dari parameter button.addEventListener("click", function() { orang.getName(); }); 0. Namun penambahannya tergantung jenis acara yang dimunculkan
Hapus Penangan Acara
Untuk berhenti mendengarkan suatu elemen, kita dapat menggunakan metode button.dispatchEvent(new Event("click")); 3
var tombol = document.getElementsByTagName("button")[0]; function callback() { console.log("#tombol ditekan"); } // memasang event handler tombol.addEventListener("click", callback, false); // melepas event handler tombol.removeEventListener("click", callback, false);stopPropagation & stopImmediatePropagation
Kita dapat menghentikan fase dari event dengan menggunakan metode var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 2 dan var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 3. Walaupun kegunaannya hampir sama, namun ada hal yang membedakannya
Untuk melihat perbedaan keduanya, silahkan lihat demo ini
JS Bin
Jadi, var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); _2 akan menghentikan fase saat ini. Jadi pada contoh di atas, event target.addEventListener(tipeEvent, listener [, useCapture]); _0 pada target.addEventListener(tipeEvent, listener [, useCapture]); 9 tidak dijalankan ketika document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0 ditekan. Hal yang sama juga terjadi saat menggunakan var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 3
Perbedaannya adalah, var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); _3 juga menghentikan document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 yang diinstal untuk mendengarkan acara yang sama. Namun, document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5 yang dihentikan hanya pendengar yang diinstal setelah document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 berjalan var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 3 diinstal
Jadi, pada contoh di atas, document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5 kedua yang dilampirkan ke button.addEventListener("click", function( e ) { var target = e.target; target.classList.add("highlight"); }); 7 tidak berjalan saat button.addEventListener("click", function( e ) { var target = e.target; target.classList.add("highlight"); }); 7 ditekan. Itu karena document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5 lari pertama var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 3
Sementara itu, document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5 adalah yang kedua pada button.addEventListener("click", function( e ) { var target = e.target; addHighlighter(target); }); function addHighlighter( el ) { el.classList.add("highlight"); } 2 tetapi dijalankan ketika button.addEventListener("click", function( e ) { var target = e.target; addHighlighter(target); }); function addHighlighter( el ) { el.classList.add("highlight"); } 2 ditekan. Meskipun document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 pada button.addEventListener("click", function( e ) { var target = e.target; addHighlighter(target); }); function addHighlighter( el ) { el.classList.add("highlight"); } 2 berjalan var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 2
preventDefault
Secara default, browser memiliki reaksinya sendiri ketika suatu elemen memunculkan suatu peristiwa. Misalnya, ketika elemen button.addEventListener("click", function( e ) { var target = e.target; addHighlighter(target); }); function addHighlighter( el ) { el.classList.add("highlight"); } _7 ditekan, browser akan mencoba membuka tautan pada elemen tersebut
Bagaimana jika kita ingin browser tidak menjalankan reaksi defaultnya?
JS Bin
Konteks Pada Pendengar
Ada yang perlu kita perhatikan saat menjalankan document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5, yaitu konteks fungsi document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5
Sebagai contoh, lihat demo berikut
JS Bin
Masalahnya adalah, ketika metode target.addEventListener(tipeEvent, listener [, useCapture]); _01 dieksekusi, ruang lingkup fungsi bukanlah objek target.addEventListener(tipeEvent, listener [, useCapture]); 02, tetapi elemen document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0. Jadi, target.addEventListener(tipeEvent, listener [, useCapture]); _04 bernilai target.addEventListener(tipeEvent, listener [, useCapture]); 05. Karena document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _0 tidak memiliki properti
Untuk mengatasinya, kita dapat menggunakan pendekatan berikut
button.addEventListener("click", function() { orang.getName(); });Atau, kita juga bisa menerapkan metode target.addEventListener(tipeEvent, listener [, useCapture]); _07 pada objek target.addEventListener(tipeEvent, listener [, useCapture]); 02 di atas. Secara otomatis, nilai dari target.addEventListener(tipeEvent, listener [, useCapture]); _09 akan melekat pada objek yang memiliki metode target.addEventListener(tipeEvent, listener [, useCapture]); 07
Hasilkan Acara Menggunakan Javascript
Kita dapat membuat event pada sebuah elemen menggunakan javascript
Misalnya, kami ingin menaikkan acara target.addEventListener(tipeEvent, listener [, useCapture]); 0 secara manual
button.dispatchEvent(new Event("click"));Kita juga bisa membuat acara baru
JS Bin
Untuk menambahkan data spesifik ke Objek Acara, kita dapat menambahkannya ke properti target.addEventListener(tipeEvent, listener [, useCapture]); 12
Kiat
Delegasi Acara
Ketika jumlah document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5 yang diinstal pada elemen yang berbeda bertambah, maka kita dihadapkan pada masalah kinerja di browser
Saat document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5 diinstal pada elemen di halaman situs web, browser harus menyimpan referensi ke document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5. Yang artinya, peningkatan memori yang dibutuhkan
Semakin banyak document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5 dipasang pada elemen pada halaman website, maka browser membutuhkan waktu untuk memasang target.addEventListener(tipeEvent, listener [, useCapture]); 17
Untuk mengurangi beban, kita bisa menggunakan delegasi acara. Caranya adalah dengan memanfaatkan fase Bubbling yang akan dilalui event saat event dimunculkan. Berikut ini adalah demo pelaksanaan acara delegasi
JS Bin
Jika melihat contoh di atas, maka daripada menginstal target.addEventListener(tipeEvent, listener [, useCapture]); 17 untuk 5 elemen target.addEventListener(tipeEvent, listener [, useCapture]); 19, kita dapat menginstal target.addEventListener(tipeEvent, listener [, useCapture]); 17 pada elemen target.addEventListener(tipeEvent, listener [, useCapture]); 21. Javascript akan berjalan document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5 (berdasarkan contoh di atas), ketika event generation sedang dalam fase bubbling. Berikut adalah contoh penerapan delegasi acara
Penanganan Acara hanya untuk penanganan
Sebaliknya kita menulis target.addEventListener(tipeEvent, listener [, useCapture]); _17 seperti contoh berikut
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, pertama, kami memisahkan event handling dari apa yang seharusnya terjadi saat event dimunculkan. Penanganan acara hanya membutuhkan elemen apa document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 3. Ini akan mendelegasikan tugas "apa yang harus dilakukan saat tombol ditekan" ke metode lain
Keuntungan dari pemisahan di atas adalah kita dapat memanfaatkan metode target.addEventListener(tipeEvent, listener [, useCapture]); 25 di tempat lain. Karena kemungkinan besar, yang diuntungkan dengan adanya metode tersebut tidak hanya document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 di atas
Alasan kedua adalah kita dapat lebih mudah menguji respons terhadap suatu peristiwa tanpa harus mensimulasikan pembuatan peristiwa pada unit pengujian kita. Jadi, pengujian unit kami akan lebih sederhana