Отвязывание обработчиков событий в цикле в 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); // отвязываем обработчик
}
Даны абзацы. По нажатию на любой из абзацев добавьте ему в конец восклицательный знак. Сделайте так, чтобы это добавление происходило лишь по первому нажатию.
