Из предыдущих уроков вы уже хорошо знаете первый способ привязать событие к элементу - с помощью атрибута, например onclick:
Это имеет свои недостатки: если, к примеру, необходимо ко всем input на странице привязать определенное событие - придется полазить по HTML странице, найти все input и каждому добавить атрибут с событием.
Поэтому есть еще один способ привязать событие к элементу.
По сути атрибут onclick является таким же атрибутом, как, к примеру, value. И, если мы могли менять атрибут value таким образом - elem.value, то точно также мы можем менять атрибут onclick.
Если мы сделаем так: elem.onclick = func, то привяжем к элементу elem функцию func.
Необходимо обратить внимание на то что когда функция написана без круглых скобок например func то она возвращает свой исходный код, а если с круглыми скобками func() то возвращает результат работы функции.
Давайте вспомним метод setInterval, когда мы использовали его таким образом window.setInterval(timer, 1000) - в этом случае мы также писали функцию timer без круглых скобок, потому что нас интересовал не результат работы функции, а ее код. (данный метод более подробно рассматривали в этом уроке: https://zen.me/28lFT1).
Достоинства такого способа
Если мы захотим задать одновременно одно событие всем input на странице, нет нужды вручную прописывать каждому из них атрибут с событием. Можно просто получить все input, перебрать их циклом и каждому привязать событие.
Давайте сделаем это. Получим все input с помощью querySelectorAll и в цикле привяжем каждому такое событие: пусть по клику каждый input выдает алертом восклицательный знак.
Пример:
При нажатии на любой input будет срабатывать функция func
Недостатки
Теперь поговорим о недостатках. Недостатком такого способа будет то, что мы можем привязать к событию только одну функцию. Если попытаться сначала записать одну функцию, а потом другую - у нас ничего не получится.
В принципе, эту проблему легко обойти, если ввести еще и третью функцию func3. Привяжем к атрибуту onclick только func3, а она пусть вызывает func1 и func2 у себя внутри:
Использование this
Давайте усложним задачу и сделаем так, чтобы alert выводил содержимое атрибута value того input, по которому кликнули мышкой через this.
Пример:
В данном случае this будет доступен внутри функции func и он ссылается на тот элемент, в котором возникло событие, вызвавшее эту функцию. То есть, если сделать клик по первому input - в this будет лежать ссылка на него, а если по второму - то на него.
Задача
Создайте 4 картинки. К каждой картинке прикрепите событие, Событие должно при клике на картинку выводить ее src в console.log().