АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP, Python или фреймворки. Сегодня последний день для записи! Жми!
⊗jsPmDmLHU 362 of 505 menu
Новый формат обучения! Репетиторство по программированию. Есть еще 3 свободных места! Жми для подробностей.

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

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

byenru