Objek this dalam JavaScript

Sekarang kita akan bekerja dengan objek khas this yang terdapat dalam fungsi-pemproses peristiwa. Objek ini menunjuk kepada elemen di mana peristiwa berlaku.

Objek this adalah berguna apabila elemen di mana peristiwa berlaku, dan elemen yang tindakan dilakukan akibat peristiwa itu, - adalah elemen yang sama.

Sebagai contoh, jika kita mempunyai input, kita boleh mengikat pemproses kehilangan fokus kepadanya dan apabila peristiwa ini berlaku, lakukan sesuatu dengan teks input. Mari kita lakukan seperti yang diterangkan. Katakan kita mempunyai input:

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

Mari dapatkan rujukan kepadanya dalam pembolehubah elem:

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

Mari ikat fungsi-pemproses peristiwa blur kepadanya:

elem.addEventListener('blur', func);

Di dalam fungsi func ini, objek this akan boleh diakses, menunjuk kepada input kita:

function func() {
	console.log(this); // mengandungi rujukan kepada elemen kita
}

Mari paparkan kandungan atribut value input kita:

function func() {
	console.log(this.value); // paparkan kandungan atribut
}

Sekarang, mari tuliskan beberapa teks ke dalam input:

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

Boleh juga menggunakan fungsi tanpa nama:

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

Diberikan input. Apabila input ini mendapat fokus, tuliskan nombor 1 ke dalamnya, dan apabila kehilangan fokus - nombor 2. Untuk merujuk kepada input di dalam fungsi-pemproses, gunakan objek this.

Diberikan butang, yang nilainya adalah nombor 1. Buatkan agar apabila butang ini diklik, nilainya bertambah satu setiap kali.