offline version v3
Запись на курсы по HTML, CSS, JavaScript, PHP, фреймворкам и CMS,
а также: помощь в поиске работы и заказов, стажировка на реальных проектах→
⊗jsPmDmLHU 360 of 503 menu

Отвязывание обработчиков событий в цикле в 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); // отвязываем обработчик }

Даны абзацы. По нажатию на любой из абзацев добавьте ему в конец восклицательный знак. Сделайте так, чтобы это добавление происходило лишь по первому нажатию.

enru