Objek this dalam JavaScript

Sekarang kita akan bekerja dengan objek khusus this, yang tersedia dalam fungsi-penangan peristiwa. Objek ini menunjuk ke elemen di mana peristiwa terjadi.

Objek this berguna ketika elemen, di mana peristiwa terjadi, dan elemen, yang dilakukan tindakan sebagai hasil dari peristiwa, adalah elemen yang sama.

Misalnya, jika kita memiliki input, kita dapat mengikatkan penangan kehilangan fokus padanya dan saat peristiwa itu terjadi, lakukan sesuatu dengan teks input. Mari kita lakukan hal yang dijelaskan. Anggaplah kita diberikan input:

<input id="elem" value="text">

Mari kita dapatkan referensi padanya dalam variabel elem:

let elem = document.querySelector('#elem');

Ikatkan fungsi-penangan peristiwa blur padanya:

elem.addEventListener('blur', func);

Di dalam fungsi func ini akan tersedia objek this, yang menunjuk ke input kita:

function func() {
	console.log(this); // berisi referensi ke elemen kita
}

Mari kita tampilkan isi dari atribut value input kita:

function func() {
	console.log(this.value); // tampilkan isi atribut
}

Nah, sekarang mari tuliskan beberapa teks ke input:

function func() {
	this.value = '!!!';
}

Bisa juga menggunakan fungsi anonim:

elem.addEventListener('blur', function() {
	this.value = '!!!';
});

Diberikan input. Saat mendapatkan fokus oleh input ini tuliskan angka 1 ke dalamnya, dan saat kehilangan fokus - angka 2. Untuk merujuk ke input di dalam fungsi-penangan gunakan objek this.

Diberikan tombol, yang nilainya adalah angka 1. Buatlah agar saat diklik tombol ini nilainya setiap kali bertambah satu.