Адвязванне апрацоўшчыкаў падзей у цыкле ў JavaScript
Няхай цяпер у нас ёсць не адзін элемент, а некалькі. Напрыклад, некалькі абзацаў:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Дадаймо да кожнага з гэтых абзацаў апрацоўшчыкам
кліка прывяжам функцыю func
:
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', func);
}
function func() {
console.log(this.textContent);
}
Давайце цяпер пераробім код так, каб кожны абзац рэагаваў толькі на першае націсканне на яго. Для гэтага пры кліку на абзац будзем адвязваць ад яго прывязаны апрацоўшчык. Пры гэтым адвязванне будзе канкрэтна ад гэтага абзаца, ніяк не закранаючы астатніх.
Як вы ўжо ведаеце, элемент, у якім адбылася
падзея, можна атрымаць у функцыі-апрацоўшчыку
праз this
. Гэта значыць, што трэба
выконваць адвязванне апрацоўшчыка ад this
,
вось так:
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', func);
}
function func() {
console.log(this.textContent);
this.removeEventListener('click', func); // адвязваем апрацоўшчык
}
Дадзены абзацы. Па націсканні на любы з абзацаў дадайце яму ў канец клічнік. Зрабіце так, каб гэта дадаванне адбывалася толькі па першым націсканні.