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="http://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="http://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="http://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="http://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="http://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="http://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="http://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?

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.