Իվենթների անջատում JavaScript-ում

Այս դասում մենք կսովորենք անջատել իվենթների դիտարկիչները, որոնք նախկինում կապված էին մեր կողմից էլեմենտներին։ Օրինակի համար թող տրված լինի հետևյալ կոճակը՝

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

Եկեք կապենք այս կոճակին func ֆունկցիան․

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

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

Եկեք հիմա անենք այնպես, որ դիտարկիչը աշխատի առաջին կլիկի ժամանակ, իսկ դրանից հետո անջատվի կոճակից։ Դրա համար գոյություն ունի հատուկ մեթոդ՝ removeEventListener։ Այս մեթոդը առաջին պարամետրով ընդունում է իվենթի տեսակը, իսկ երկրորդով՝ այն ֆունկցիայի հղումը, որը պետք է անջատել։

Որպես կանոն, սա նշանակում է, որ իվենթի դիտարկիչը անջատվում է այնպես, ինչպես կապվել էր։ Այսինքն, եթե մենք այն կապել ենք այսպես՝ addEventListener('click', func), ապա կանջատենք նույն պարամետրերով, այսպես՝ removeEventListener('click', func)։

Այսպիսով, լուծենք մեր առաջադրած խնդիրը․

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

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

Տրված է հղում և կոճակ։ Կոճակի վրա սեղմելու դեպքում ավելացրեք հղման տեքստի վերջում նրա href ատրիբուտի պարունակությունը կլոր փակագծերում։ Անեք այնպես, որ այս ավելացումը տեղի ունենա միայն առաջին սեղմման դեպքում։

Տրված է կոճակ, որի արժեքը 1 թիվն է։ Անեք այնպես, որ այս կոճակի վրա կլիկի ժամանակ նրա արժեքը ամեն անգամ մեծանա մեկով։ Այն բանից հետո, երբ կոճակի արժեքը հասնի 10-ի, անջատեք դիտարկիչը, որպեսզի կոճակը այլևս չարձագանքի սեղմումներին։