Perbedaan Onclick dan addEventListener('click')

Sesuai judul di atas, kali ini saya akan membahas event fungsi click yang sering saya gunakan dalam pembuatan project javascript.

Ada beberapa pertanyaan yang mesti kita jawab soal penggunakan event click ini, diantaranya yaitu :

1. Kapan kita perlu menggunakan onclick ?
2. Kapan kita perlu menggunakan addEventListener('click') ?

Kapan kita perlu menggunakan onclick ?

Onclick adalah attribute element DOM HTML, yang berfungsi untuk menjalankan fungsi javascript ketika event klik terjadi. Onclik dapat diletak di element DOM HTML seperti

<button onclick='funtionContoh()'></button>

 <span onclick='funtionContoh()'></span>

<div onclick='funtionContoh()'></div>

<i onclick='funtionContoh()'></i>

<a onclick='funtionContoh()'></a>

dll.

Lalu yang jadi pertanyaan, Kapan kita perlu menggunakan onclick ini ?

Jawabannya adalah pada saat element DOM HTML yang memakai attribute onclick belum atau sudah termuat seluruhnya.

Sebagai contoh saya punya code seperti berikut :

<div id='tes'></div>

<script>

// fungsi runFunction() dapat ditaruh disini

document.getElementById('tes').innerHTML = '<button onclick='
runFunction()'>klik</button>';

// fungsi runFunction() dapat ditaruh disini

</script>

Ketika code di atas dijalankan, maka code javascript akan mencari element dengan id 'tes'. Lalu mengisinya dengan DOM HTML <button function='runFunction()'></button> menjadi sebuah tombol. Ketika tombol ini kita klik, maka akan menjalankan fungsi bernama runFunction().

runFunction() dapat di tulis sebelum atau sesudah code script document.getElementById('tes').innerHTML.

Terus, apa bedanya dengan addEventListener('click') ?
Baik, kita lanjut ke fungsi klik event berikutnya.

Kapan kita perlu menggunakan addEventListener('click') ?

addEventListener('click') adalah sebuah pemberian event click kepada sebuah object window dan document.


Object window adalah seperti berikut:

1. window
Jika ditambahkan event addEventListener('click'), maka menjadi :

window.addEventListener('click', function () {
    code eksekusi
});

Object document adalah seperti berikut :

1. getElementById()
Jika ditambahkan event addEventListener('click'), maka menjadi :

getElementById().addEventListener('click', function () {
    //code eksekusi
});

2. getElementsByName()
Jika ditambahkan event addEventListener('click'), maka menjadi :

getElementsByName().addEventListener('click', function () {
    //code eksekusi
});

3. getElementsByTagName()
Jika ditambahkan event addEventListener('click'), maka menjadi :

getElementsByTagName().addEventListener('click', function () {
    //code eksekusi
});

4. getElementsByClassName()
Jika ditambahkan event addEventListener('click'), maka menjadi :

getElementsByClassName().addEventListener('click', function () {
    //code eksekusi
});

Nah, kembali ke pertanyaan sebelumnya. Kapan addEventListener('click') ini di gunakan ?

addEventListener('click') digunakan pada saat DOM HTML yang ingin di berikan event clik sudah TERMUAT seluruhnya atau TERSEDIA di HTML.

Kenapa harus termuat selurunya atau tersedia?

Jika belum termuat seluruhnya, maka pemberian event klik kepada object document akan eror. Karena object document tidak terbaca dan dianggap tidak ada.


Contoh kasus seperti ini :

Tono diberi tugas oleh dosen untuk memperbaiki eror pada code javascript. Dosen memberi sebuah code seperti ini.

<div id='tes'></div>

<script>

document.getElementById('getClick').addEventListener('click', function {
    alert('sukses');
});

document.getElementById('tes').innerHTML = '<span id="
getClick">Klik</span>';

</script>

Apa yang harus dilakukan Tono pada code script tersebut agar berjalan ?

Jawaban ada 2, yaitu :


Jawaban 1

Jawabannya adalah dengan memindahkan code yang saya beri warna biru, lalu menaruhnya di bawah code yang saya beri warna merah.

Sehingga codenya menjadi seperti berikut :

<div id='tes'></div>

<script>

document.getElementById('tes').innerHTML = '<span id="
getClick">Klik</span>';

document.getElementById('getClick').addEventListener('click', function {
    alert('sukses');
});

</script>

Alasan dipindah karena id='getLink' harus berada pada DOM HTML sebelum diberi event addEventListener('click').



Jawaban 2

Jawabannya adalah merubah id='getClick' menjadi onclick='getClick()' dan mengganti event addEventListener('click') menjadi sebuah fungsi getClick().

Sehingga codenya menjadi seperti berikut:

<div id='tes'></div>

<script>

function getClick() {
    alert('sukses');
};

document.getElementById('tes').innerHTML = '<span onclick="
getClick()
">Klik</span>';

</script>

Alasannya karena fungsi getClick() tidak akan dieksekusi sebelum element span di klik.

Kesimpulan :

1. Onclick digunakan pada saat element DOM HTML yang memakai attribute onclick  sudah atau belum termuat seluruhnya.

2. addEventListener('click') digunakan pada saat DOM HTML yang ingin di berikan event click sudah TERMUAT seluruhnya atau TERSEDIA di HTML.


Mungkin itu yang bisa saya terangkan, jika ada yang salah mohon dikoreksi.
Terimakasih sudah berkunjung.