Acara adalah salah satu nama tindakan yang dapat digunakan untuk memicu proses logis dalam JavaScript. Acara ini biasanya dibangun ke dalam browser dan ada juga yang ditanam secara manual. Acara yang paling sering digunakan adalah acara title. Acara title akan terjadi atau dijalankan ketika elemen HTML diklik. Demikian pula, acara lainnya semuanya memiliki proses, kondisi, dan kriteria untuk menjalankan JavaScript
Daftar Acara yang biasanya tersedia dalam javascript
Berikut ini adalah daftar event yang umum atau tersedia dalam javascript
Nama Peristiwa Deskripsi n titleEvent yang paling sering digunakan. Event ini sudah ada di /anchor ketika anda buka linkonchangeEvent on change akan terjadi jika ada perubahan pada suatu elemen, bisa merubah nilai, bentuk, atau isi dari elemen tersebut. onmouseoverElement yang akan diproses jika mouse digerakkan ke elemen tertentu. onmouseoutEvent yang akan terjadi saat pointer mouse keluar dari elemen tertentu onkeydownEvent yang terjadi saat keyboard ditekan iconloadEvent yang terjadi saat browser selesai memanggil semua elemen DOMPenggunaan acara
Penggunaan acara tergantung pada kebutuhan pengguna. Jika kita ingin menggunakan tombol untuk mengganti teks tertentu, maka kita cukup menambahkan event title ke elemen tombol. Itu sama dengan acara lainnya. Ada beberapa kejadian yang biasanya dipicu oleh kejadian tertentu. Seperti event sebelum klik atau event sebelum diklik, event setelah klik atau event setelah diklik dan masih banyak lagi lainnya
Instal acara di Elemen
Bagaimana cara menanam / memasang acara di elemen tertentu? . Namun jika kita menggunakan framework tertentu maka kita bisa menanamnya dengan mudah. Pada percobaan kali ini kita akan menggunakan jQuery sebagai framework JavaScript
Instal Acara title menggunakan jQuery
Untuk menginstall event onlick menggunakan jquery cukup mudah dilakukan. Hal pertama yang harus dilakukan adalah memanggil jQuery ke dalam HTML. Kemudian buat skrip sebaris untuk menjalankannya. Berikut ini adalah contohnya
$("#nama_id_element").on("click",function(e){ e.preventDefault(); alert("Saya diklik"); });Dari contoh kode, kita akan menanamkan event title pada elemen DOM dengan ID=”name_id_element”. Jadi jika Anda membuat HTML yang sudah memiliki ID yang sama, maka ketika ID tersebut diklik maka akan muncul peringatan
Menghapus instalan acara title menggunakan jQuery
Sama seperti menanam sebuah event, menghilangkan sebuah event juga sangat mudah jika dilakukan dengan menggunakan javascript. Berikut ini adalah contoh kodenya
$("#nama_id_element").off("click");_Jika kita sudah memasang event title pada elemen dengan ID=”name_id_element”, maka sekarang sudah tidak bisa diklik lagi
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 di atas 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 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, fase 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 bernilai 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). Node DOM 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). kami dapat memanfaatkan properti ini untuk membatalkan respons default dari pengguna saat document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 3 mengalami peristiwa button.addEventListener("click", function() { orang.getName(); }); 2. Misalnya, ketika 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 respons 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 on target.addEventListener(tipeEvent, listener [, useCapture]); 9 tidak dieksekusi 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
var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false);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 mengeksekusi 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