Cara menggunakan addeventlistener javascript untuk apa?

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.

Kalian telah mengenal elemen-elemen HTML. Adapun jenis-jenis event di HTML antara lain :

• Onmouseover: saat pengguna mengarahkan pointer pada sebuah elemen HTML.
• Onclick: saat pengguna melakukan klik pada sebuah elemen HTML.
• Onmouseout: saat pengguna memindahkan pointer dari sebuah elemen HTML (kebalikan onmouseover).
• Onkeydown: saat pengguna menekan sebuah tombol di keyboard.
• Onchange: saat seuah elemen HTML telah berubah.
• Onload: saat browser selesai memuat halaman web.

Event dapat digunakan untuk untuk menangani, dan memverifikasi, masukan pengguna, tindakan pengguna, dan tindakan browser. Selain itu, event pada Javascript dapat digunakan untuk:

• Hal-hal yang harus dilakukan setiap kali halaman dimuat.
• Hal-hal yang harus dilakukan ketika halaman ditutup.
• Tindakan yang harus dilakukan saat pengguna mengklik tombol.
• Konten yang harus diverifikasi ketika pengguna memasukkan data

Membuat Event pada Javascript

Untuk 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 >
< html lang="en" >
< head >
< meta charset="UTF-8" >
< meta http-equiv="X-UA-Compatible" content="IE=edge" >
< meta name="viewport" content="width=device-width, initial-scale=1.0" >
< title >Javascript Event
< style >
  .container{
   width: 30%;
   height: 70px;
   background-color: lightblue;
   padding-top: 20px;
   padding-left: 30px;
   margin: 100px auto;
  }
  input{
   outline: none;
   height: 25px;
   width: 75%;
   font-size: 16px;
   padding-left: 10px;
  }
  button{
   width: 60px;
   height: 25px;
   cursor: pointer;
  }
        .my-name{
            text-transform: capitalize;
            font-weight: bold;
        }
< body >
< div class="container" >
  < input type="text" class="input-name" >
  < button >Save
  < p >Nama Saya : < span class="my-name" >

 < script >
  let input = document.querySelector('.input-name')
  let button = document.querySelector('button')
        let name = document.querySelector('.my-name')

  button.addEventListener('click', function(){
            if(input.value == ''){
                name.innerHTML = 'Inputan Kosong!'
            }else{
                name.innerHTML = input.value
                input.value = ''
            }
        })

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 target.addEventListener(tipeEvent, listener [, useCapture]); 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 Kerja

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:

<html> <head> <meta charset="UTF-8"> <title>Event</title> </head> <body> <div> <button>Tekan Saya</button> </div> </body> <html>

Yang terjadi ketika tombol target.addEventListener(tipeEvent, listener [, useCapture]); 1 ditekan dapat dilihat pada gambar di bawah ini:

Gambar Event

Capturing Phase

Ketika tombol di atas ditekan, javascript tidak langsung membangkitkan event target.addEventListener(tipeEvent, listener [, useCapture]); 0 pada tombol tersebut. Melainkan, javascript membangkitkan event target.addEventListener(tipeEvent, listener [, useCapture]); 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 target.addEventListener(tipeEvent, listener [, useCapture]); 0 pertama kali pada target.addEventListener(tipeEvent, listener [, useCapture]); 5. Kemudian, event target.addEventListener(tipeEvent, listener [, useCapture]); 0 dibangkitkan pada target.addEventListener(tipeEvent, listener [, useCapture]); 7, setelah itu target.addEventListener(tipeEvent, listener [, useCapture]); 8, dan seterusnya menurun hingga element target.addEventListener(tipeEvent, listener [, useCapture]); 9 yang berada di atas element document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0. Dan kejadian ini dinamakan sebagai Capture Phase.

Nah, kita dapat mendengarkan event target.addEventListener(tipeEvent, listener [, useCapture]); 0 ini ketika ia masih dalam fase capture. DEMO:

JS Bin<script src="//static.jsbin.com/js/embed.js"></script>

Jadi, kita memanfaatkan metode yang bernama document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 2 pada suatu element untuk mendengarkan event dari element tersebut:

target.addEventListener(tipeEvent, listener [, useCapture]);

• document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 3: adalah element yang membangkitkan event
• document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 4: adalah event yang dibangkitkan (dalam contoh di atas, tipe Event adalah "click")
• document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5: metode yang akan dijalankan ketika event document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 4 dibangkitkan 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: bila bernilai 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.

Bila kita tidak mengisi nilai untuk document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 8, maka nilai default-nya 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 dijalankan pada fase Bubbling. Fase Bubbling akan kita bahas pada bagian berikutnya.

Target Phase

Berdasarkan contoh di atas, fase capture hanya berjalan hingga element target.addEventListener(tipeEvent, listener [, useCapture]); 9 yang berada tepat di atas element document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0. Ketika event target.addEventListener(tipeEvent, listener [, useCapture]); 0 dibangkitkan pada element document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 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 document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0). .

Target Phase Demo<script src="//static.jsbin.com/js/embed.js"></script>

Bubbling Phase

Pasca event target.addEventListener(tipeEvent, listener [, useCapture]); 0 dibangkitkan pada element document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0, javascript memulai fase baru, yaitu Bubbling Phase. Fase ini dimulai dari element di atasnya document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0, yaitu target.addEventListener(tipeEvent, listener [, useCapture]); 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 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);

Object Event

Setiap document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 yang dipasang pada sebuah event, akan memperoleh 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 tersebut memiliki properti-properti menarik yang dapat kita manfaatkan untuk merespon sebuah event.

Kita ambil contoh pembangkitan event 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 yang diterima oleh document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 di atas memiliki properti sebagai berikut:

• button.addEventListener("click", function() { orang.getName(); }); 2 (String): tipe dari event yang dibangkitkan
• document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 3 (Node): DOM Node dimana event berasal (dalam contoh kita di atas adalah document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0)
• button.addEventListener("click", function() { orang.getName(); }); 5 (Node): DOM Node dimana event saat ini sedang dibangkitkan (silahkan lihat kembali 3 fase di atas)
• button.addEventListener("click", function() { orang.getName(); }); 6 (Boolean): apakah saat ini kita berada pada fase bubbling?
• button.addEventListener("click", function() { orang.getName(); }); 7 (Function): kita dapat memanfaatkan properti ini untuk membatalkan respon default dari user ketika document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 3 mengalami event button.addEventListener("click", function() { orang.getName(); }); 2. Misalnya ketika suatu var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 0 ditekan oleh pengguna, maka respon default-nya adalah membuka link tersebut. Namun kita dapat membatalkan respon tersebut 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 (Function): Memberhentikan fase yang sedang terjadi.
• var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 3 (Function): Hampir sama seperti var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 2 di atas. Perbedaannya akan kita bahas nantinya.
• var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 5 (Boolean): mendakan apakah button.addEventListener("click", function() { orang.getName(); }); 7 bisa dijalankan atau tidak.
• var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 7 (Boolean): menandakan apakah button.addEventListener("click", function() { orang.getName(); }); 7 telah dijalankan.
• var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 9 (Boolean): menandakan bahwa event dibangkitkan oleh browser, bukan secara manual melalui javascript.
• button.dispatchEvent(new Event("click")); 0 (Number): menandakan fase aktif yang sedang terjadi: (0) capture, (1) target, (2) bubbling.
• button.dispatchEvent(new Event("click")); 1 (Number): waktu yang menandakan kapan event terjadi.

Masih ada lebih banyak lagi properti dari parameter button.addEventListener("click", function() { orang.getName(); }); 0. Namun tambahan tersebut tergantung dari jenis event yang sedang dibangkitkan.

Menghapus Event Handler

Untuk berhenti mendengarkan suatu element, maka kita dapat memanfaatkan 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 memberhentikan 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. Meskipun kegunaannya hampir sama, namun terdapat hal yang membedakannya.

Untuk melihat perbedaan antara keduanya, silahkan pembaca melihat demo ini:

JS Bin<script src="//static.jsbin.com/js/embed.js"></script>

Jadi, var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 2 akan memberhentikan fase yang sedang berjalan. Sehingga dalam 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 di tekan. Hal yang sama juga terjadi ketika menggunakan var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 3.

Bedanya adalah, var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 3 juga memberhentikan document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 yang dipasang untuk mendengarkan event yang sama. Namun, document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 yang diberhentikan hanyalah listener yang dipasang setelah document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 yang menjalankan var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 3 terpasang.

Jadi, dalam contoh di atas, document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 kedua yang dipasang pada button.addEventListener("click", function( e ) { var target = e.target; target.classList.add("highlight"); }); 7 tidak dijalankan ketika 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 pertama menjalankan 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 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 menjalankan var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 2.

preventDefault

Browser secara default memiliki reaksi tersendiri ketika suatu element membangkitkan event. Misal, ketika element button.addEventListener("click", function( e ) { var target = e.target; addHighlighter(target); }); function addHighlighter( el ) { el.classList.add("highlight"); } 7 ditekan, maka browser akan mencoba membuka link pada element tersebut.

Bagaimana bila kita ingin agar browser tidak menjalankan reaksi defaultnya? Kita gunakan button.addEventListener("click", function() { orang.getName(); }); 7.

JS Bin<script src="//static.jsbin.com/js/embed.js"></script>

Konteks Pada Listener

Ada yang perlu kita perhatikan ketika menjalankan sebuah document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5, yaitu konteks dari fungsi document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 tersebut.

Misal, perhatikan demo berikut:

JS Bin<script src="//static.jsbin.com/js/embed.js"></script>

Masalahnya adalah, ketika metode target.addEventListener(tipeEvent, listener [, useCapture]); 01 dijalankan, scope dari fungsi tersebut bukanlah objek target.addEventListener(tipeEvent, listener [, useCapture]); 02, melainkan element document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0. Sehingga, 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 tersebut.

Untuk menangani hal tersebut, kita dapat menggunakan pendekatan berikut:

button.addEventListener("click", function() { orang.getName(); });

Atau, kita dapat juga menerapkan sebuah 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 dipasang pada objek yang memiliki metode target.addEventListener(tipeEvent, listener [, useCapture]); 07 tersebut.

var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false);

Membangkitkan Event Menggunakan Javascript

Kita dapat membangkitkan suatu event pada suatu element menggunakan javascript.

Misal, kita ingin membangkitkan event target.addEventListener(tipeEvent, listener [, useCapture]); 0 secara manual:

button.dispatchEvent(new Event("click"));

Kita juga bisa membuat sebuah event baru:

JS Bin<script src="//static.jsbin.com/js/embed.js"></script>

Untuk menambahkan data khusus pada Event Object, kita dapat menambahkannya pada properti target.addEventListener(tipeEvent, listener [, useCapture]); 12.

Tips

Event Delegation

Ketika jumlah document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 yang terpasang pada element-element yang berbeda semakin banyak, maka kita berhadapan dengan masalah performa pada browser.

Ketika sebuah document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 dipasang pada element-element pada suatu halaman website, maka browser harus menyimpan referensi terhadap document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 tersebut. Yang berarti, bertambahnya memori yang dibutuhkan.

Semakin banyak document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 yang dipasang pada element-element pada suatu halaman website, maka browser-pun butuh waktu untuk melakukan pemasangan target.addEventListener(tipeEvent, listener [, useCapture]); 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="//static.jsbin.com/js/embed.js"></script>

Bila melihat contoh di atas, maka daripada memasang target.addEventListener(tipeEvent, listener [, useCapture]); 17 untuk 5 element target.addEventListener(tipeEvent, listener [, useCapture]); 19, kita dapat memasang target.addEventListener(tipeEvent, listener [, useCapture]); 17 pada element target.addEventListener(tipeEvent, listener [, useCapture]); 21. Javascript akan menjalankan document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 (berdasarkan contoh di atas), ketika pembangkitan event berada pada fase bubbling. Demikikanlah contoh penerapan event delegation.

Event Handling untuk handling saja

Daripada kita menulis target.addEventListener(tipeEvent, listener [, useCapture]); 17 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 document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 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 target.addEventListener(tipeEvent, listener [, useCapture]); 25 pada tempat lain. Karena ada kemungkinan besar, yang memperoleh manfaat dari keberadaan metode tersebut bukan hanya document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 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?

Apakah nama event yang terjadi ketika user meng klik suatu element HTML?