JavaScript даги this объекти

Ҳозир биз функция-ҳодис қайта ишловчисида mavjud бўлган махсус this объекти билан ишлаймиз. Ушбу объект ҳодис юз берган элементни кўрсатади.

this объекти қулай, агар ҳодис юз берган элемент ва ҳодис натижасида амал бажариладиган элемент бир хил бўлса.

Маслан, агар бизда инпут бўлса, биз унга фокус йўқотиш ҳодиси учун қайта ишловчини боглашimз мумкин ва ушбу ҳодис юз берганда инпут матни билан бирор иш бажаришimз мумкин. Келтирилганини бажарамиз. Бизда инпут берилган бўлсин:

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

Келик уни elem ўзгарувчисига ҳавола сифатида оламиз:

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

Унга blur ҳодиси учун функция-қайта ишловчини боглаймиз:

javascriptelem.addEventListener('blur', func);

Ушбу func функцияси ичида бизнинг инпутимизга ишора қилувчи this объекти мавжуд бўлади:

javascriptfunction func() {
  console.log(this); // бизнинг элементimзга ҳаволани ўз ичига олади
}

Инпутимизнинг value атрибутининг mазмунини чиқарамиз:

javascriptfunction func() {
  console.log(this.value); // атрибут mазмунини чиқарамиз
}

Энди эса инпутга бирор матн ёзамиз:

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

Номсиз функциядан ҳам фойдаланиш мумкин:

javascriptelem.addEventListener('blur', function() {
  this.value = '!!!';
});
Задание 1

Инпут берилган. Ушбу инпут томонидан фокус олинганида унга 1 рақамини ёзинг, фокус йўқотилганида эса 2 рақамини ёзинг. Функция-қайта ишловчи ичида инпутга mуроожат қилиш учун this объектидан фойдаланинг.

Задание 2

Қиймати 1 рақами бўлган тугма берилган. Ушбу тугма босилганда унинг қиймати ҳар дафъа биртага ошишини таъминланг.