JavaScriptda Hodisalarni Bog‘lamaslik

Ushbu darsda biz ilgari elementlarga bog‘lagan hodisa qayta ishlovchilarimizni qanday bog‘lamaslik kerakligini o‘rganamiz. Misol uchun quyidagi tugma berilgan:

<input id="button" type="submit">

Keling, ushbu tugmaga func funksiyasini bog‘laymiz:

let button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
	console.log('!!!');
}

Keling endi, hodisa qayta ishlovchisi faqat birinchi marta bosilganda ishlasin, keyin esa tugmadan bog‘lanishi ochilsin. Buning uchun maxsus removeEventListener usuli mavjud. Ushbu usul birinchi parametr sifatida hodisa turini, ikkinchi parametr sifatida esa bog‘lamaslik kerak bo‘lgan funksiyaga havolani qabul qiladi.

Odatda, bu hodisa qayta ishlovchisi bog‘langanidek ochilishini anglatadi. Ya'ni, agar biz uni shunday bog‘lagan bo‘lsak: addEventListener('click', func), demak xuddi shu parametrlar bilan ochamiz, mana shunday: removeEventListener('click', func).

Shunday qilib, o‘zimiz belgilagan vazifani hal qilaylik:

let button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
	console.log('!!!');
	this.removeEventListener('click', func);
}

Havola va tugma berilgan. Tugma bosilganda havola matnining oxiriga uning href atributi qiymatini qavs ichiga olgan holda qo‘shing. Buning faqat birinchi bosilishida amalga oshishini ta'minlang.

Qiymati 1 soni bo‘lgan tugma berilgan. Ushbu tugma bosilganda uning qiymati har safar bittaga oshirilsin. Tugma qiymati 10 ga yetgach - hodisa qayta ishlovchisini bog‘lamang, shunda tugma boshqa bosilishlarga javob bermaydi.