В этом блоге мы рассмотрим практическую работу с addEventListener и removeEventListener. В конце теории есть задачи с помощью которых вы сможете закрепить полученную информацию.
Пожалуйста, напишите в комментариях, какой информации вам не хватило в данном уроке.
Метод addEventListener первым параметром принимает название события, а вторым - функцию, которую нужно привязать к этому событию. При этом имя события пишется без 'on': 'click' вместо 'onclick', 'mouseover' вместо 'onmouseover' и так далее. Имя функции (второй параметр) пишется без кавычек и без круглых скобок (зачем это нужно, мы с вами уже разобрали в предыдущих занятиях).
Пример:
Задача
Необходимо всем input привязать событие при котором происходит следующая логика: по потери фокуса каждый input выводит свое value в абзац с id="item".
<input type="text" value="1">
<input type="text" value="2">
<input type="text" value="3">
<p id="test"></p>
Работа с this для addEventListener
Мы с вами уже разбирали работу с this в случае, если привязывать события через свойство элемента. В случае с addEventListener this работает аналогичным образом - он будет ссылаться на тот элемент, в котором случилось событие.
Давайте посмотрим на примере: привяжем к кнопке событие onclick, которое будет запускать функцию func. Эта функция будет выводить на экран value нашей кнопки.
Пример
Здесь удобство работы с this в том, что не нужно создавать разные функции для разных элементов. Есть одна функция func, которая делает одно и то же, но для разных элементов.
Удаление привязки с помощью removeEventListener
Сейчас мы с вами займемся тем, что будем удалять привязанные к событию функции. Что у нас будет получаться: если к событию onclick привязаны функции func1 и func2, то мы сможем отвязать функцию func1, не затрагивая func2 и наоборот.
Давайте привяжем к элементу 3 функции: func1, func2 и func3, которые будут выводить на экран числа 1, 2 и 3. После этого отвяжем функции func1 и func2.
Пример
Давайте усложним пример и будем удалять привязку внутри самих функций.
Сделаем так, что при первом клике на кнопку сработают все 3 функции и при этом func1 и func2 отвяжутся от элемента. При следующих кликах будет срабатывать только функция func3, которую мы не отвязываем.
Пример функций
В следующем примере мы ко всем кнопкам привяжем функцию func. Функция будет выводить содержимое атрибута value той кнопки, на которую нажмете. А после этого функция func будет отвязываться от этой кнопки с помощью removeEventListener. И получится что каждая кнопка будет реагировать только на первое нажатие по ней
Очень важно после теории порешать задачи. Это помогает закрепить информацию в памяти.
Задачи:
Для всех input сделайте сделайте логику при которой они выводят своё value через alert по первому нажатию. Повторное нажатие на input не должно ничего выводить.
Создайте картинки. К картинке прикрепите событие. При клике на картинку в console.log() появлялся ее src.
Создайте ссылки. К ссылкам привяжите событие. при наведении курсора на каждую ссылку в title сохраняется ее текст.
Создайте две ссылки. К ссылкам привяжите события такие при которых после наведения курсора на ссылку в конец текста дописывался ее href в скобках.
Вышеуказанную задачу измените так чтобы, при наведении на ссылку отвязывалось событие с добавлением href.
Создайте три абзаца с числами. После нажатия на абзац в нем появляется квадрат числа, которое он содержит.
Создайте три <div>любой текст</div>. После нажатия на каждый див он красится зеленым цветом, при повторном красится обратно. После каждого клика меняется фон с одного на другой. Напишите код так, чтобы было две функции: одна красит в зеленый цвет, другая в желтый и они сменяли друг друга через removeEventListener.