JavaScript-də keçidin qadağan edilməsi xətası

Tutaq ki, bizim bir keçidimiz var:

<a href="">link</a>

Keçidimizi dəyişənə təyin edək:

let link = document.querySelector('a');

Keçidimizə klik üçün hadisə işləyicisi təyin edək. Səhifənin yenidən yüklənməsinin qarşısını almaq üçün keçidi ləğv edək:

link.addEventListener('click', function(event) {
	console.log(this.textContent);
	event.preventDefault();
});

Görünür ki, biz özümüzü gözlənilməz davranışdan tamamilə qoruduq. Əslində isə bu belə deyil. Ondadır ki, sintaktik xəta baş verəndə JavaScript kodu sadəcə icra olunmayacaq, keçidin bloklanması işləməyəcək və ona keçid həyata keçiriləcək.

Bu halda biz nə kodun icrasının nəticəsini, nə də konsolda xətanı görəcəyik, çünki səhifə yenidən yüklənəcək. Gəlin qəsdən kodda xəta edək və praktikada əmin olaq:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // sintaktik xəta
	event.preventDefault();
});

Belə bir problemin xarakterik əlaməti var: əgər keçidə klik anında konsola baxsaq, biz konsolda anlıq olaraq qırmızı xətanı görəcəyik, hansı ki, demək olar ki, dərhal yox olacaq.

Əlbəttə ki, biz xətanın mətnini oxumağa vaxt tapa bilməyəcəyik, bu da onun axtarışını əhəmiyyətli dərəcədə çətinləşdirir. Ancaq bir hiylə var. Biz href keçidinə reşetka qoymalıyıq. Bu halda keçidə keçid baş verməyəcək və biz konsola atılan xətanı görəcəyik:

<a href="#">link</a>