Примеры обработчики событий javascript

JavaScript – Введение в события. Обработчик события

Событие – это определённый сигнал от браузера. Он сообщает нам о том, что что-то произошло.

Например: щелчок мыши, нажатие клавиши на клавиатуре, изменение размера области просмотра, завершение загрузки документа и т.д.

При этом сигнал всегда связан с объектом . Подавать сигналы могут различные объекты: window , document , DOM-элементы и т.д.

Список некоторых событий и их название:

• DOMContentLoaded – завершение загрузки DOM;
• click – клик (нажатие левой кнопки мыши, на устройствах с сенсорным управлением возникает при касании);
• keydown – нажатие клавиши на клавиатуре;
• resize – изменение размеров документа;
• change – окончание изменения значения в поле ввода.

Обработчик события

Зачем нам события? Они нам нужны для того, чтобы мы могли реагировать на них , или другими словами выполнять определённые действия, когда они произойдут.

В JavaScript это выполняется посредством привязывания некоторой функции к событию. После этого эта функция будет вызываться всякий раз, когда это событие на указанном элементе будет возникать. Эту функцию в JavaScript принято называть обработчиком события .

Следует отметить, что на странице постоянно возникает огромное количество событий, независимо от того назначили ли мы им обработчик или нет. Наша задача – это заставить наш сайт или приложение реагировать только на те события, которые нам небезразличны.

Способы задания событию обработчика

Назначить обработчик событию можно разными способами:

• через HTML-атрибут on{событие} (не является хорошей практикой);
• посредством свойства DOM-элемента on{событие} ;
• используя специальный метод addEventListener .

Инициализация обработчика через атрибут

Этот способ позволяет прописать обработчик напрямую в разметке. Выполняется это посредством указания JavaScript кода в атрибуте on{событие} . Вместо {событие} необходимо написать имя (тип) события (например: click ).

Пример, в котором назначим HTML-элементу button обработчик события click , используя атрибут:

Если код, который нужно поместить в атрибут достаточно большой, то в этом случае его лучше оформить в виде функции, а в атрибут поместить её вызов.

   Посчитать

В этом примере мы указали в качестве обработчика функцию sum .

При этом задавать обработчик напрямую в разметке не является хорошей практикой, т.к. это приведёт к смешиванию JavaScript и HTML кода.

Добавление обработчика через свойство DOM объекта

Второй способ назначить обработчик — это использовать свойство on{событие} .

Например, привяжем обработчик события click к элементу (для этого события свойство будет onclick ):

 Нажми на меня   

В приведённом выше примере обработчик представляет собой анонимную функцию, которая будет выполняться всякий раз, когда это событие на указанном элементе будет происходить.

Другой вариант – это назначить уже существующую функцию.

function changeBgColor() { document.body.style.backgroundColor = `rgb(${Math.round(Math.random()*255)}, ${Math.round(Math.random()*255)}, ${Math.round(Math.random()*255)})`; } document.onclick = changeBgColor;

Внутри обработчика можно обратиться к текущему элементу, т.е. к тому для которого в данный момент был вызван этот обработчик. Осуществляется это с помощью ключевого слова this .

 Кнопка 1 Кнопка 2 Кнопка 3   

Кстати, когда обработчик задаётся через атрибут, то браузер самостоятельно при чтении такого HTML создаёт из значения этого атрибута функцию и присваивает её одноименному свойству этого элемента.

Кнопка  

Т.е., по сути, задание свойства через атрибут – это просто способ инициализации обработчика. Т.к. сам обработчик в этом случае тоже хранится в свойстве DOM-объекта.

Но установка обработчика через свойство имеет недостаток. С помощью него нельзя назначить одному событию несколько обработчиков. Если в коде создадим новый обработчик, то он перезапишет существующий:

Кнопка  

Кстати, также не получится назначить несколько обработчиков, один через атрибут, а другой через свойство. Последний перепишет предыдущий.

Кнопка  

Подписка на событие через addEventListener

Ещё один способ назначить событию обработчик — это использовать метод addEventListener .

// $element - объект или DOM-элемент к которому нужно добавить обработчик $element.addEventListener(event, handler[, options]);

• event — имя события (например, click );
• handler — функция, которая будет вызвана при возникновении этого события;;
• options (не обязательный) — объект, в котором можно задать дополнительные параметры.

• once — если true , то обработчик будет вызван всего один раз;
• capture — задаёт фазу, на которой нужно вызвать обработчик события (по умолчанию — на этапе всплытия); если нужно на этапе погружения (перехвата) — то этому ключу следует установить значение true ;
• passive — определяет, следует ли вызывать preventDefault() ; если установить true — то обработчик никогда не вызовет этот метод.

Кроме этого, options можно установить true или false , в этом случае он будет просто определять фазу (всплытие или погружение).

function changeBgColor() { document.body.style.backgroundColor = '#3f51b5'; } document.addEventListener('click', changeBgColor, false);

В этом примере addEventListener прикреплен к объекту document . Когда событие click возникнет на этом элементе, будет вызвана функция changeBgColor .

Если мы откроем документ, содержащий этот код в браузере, то сначала увидим пустую страницу.

Однако при клике фон страницы изменится с белого на #3f51b5 .

Иногда возникают ситуации, когда нужно удалить обработчик . Это можно выполнить, используя removeEventListener :

$element.removeEventListener(event, handler[, options]);

Этот метод принимает аргументы тех же типов, что addEventListener .

При этом чтобы, удалить обработчик, нам нужно указать точно такие же аргументы , которые мы использовали при его назначении.

 function changeBgColor() { document.body.style.backgroundColor = '#3f51b5'; } document.addEventListener('click', changeBgColor, false); document.removeEventListener('click', changeBgColor, false);

Если обработчик — анонимная функция, то её удалить нельзя.

 document.addEventListener('click', function() { document.body.style.backgroundColor = '#3f51b5'; }); // удалить обработчик установленный выше с помощью addEventListener не получится, т.к. это разные функции, имеющие одинаковый код document.removeEventListener('click', function() { document.body.style.backgroundColor = '#3f51b5'; });

Как добавить несколько обработчиков к событию?

Метод addEventListener в отличие от предыдущих способов позволяет назначить одному событию несколько обработчиков:

function handler1() { . } function handler2() { . } document.addEventListener('click', handler1); document.addEventListener('click', handler2);

Как правильно прикрепить обработчики к элементам?

Для прикрепления обработчиков к элементам, необходимо чтобы эти элементы на странице были доступны. Определить, когда они будут доступны с момента загрузки документам можно с помощью события DOMContentLoaded . Данное событие возникает на document когда DOM полностью построено:

document.addEventListener('DOMContentLoaded', function () { // DOM полностью построен и доступен . });

Задачи

1. Скрыть элемент по нажатию кнопки с классом spoiler-trigger

Написать JavaScript код, который при нажатии на кнопку spoiler-trigger будет скрывать элемент, расположенный сразу за ней. При этом на странице таких кнопок может быть несколько.

  Скрыть/показать контент 
.
 . Скрыть/показать контент 
.
 

2. Создать выпадающее меню

Имеется следующая разметка (стили добавлять не нужно, они имеются в примере):

Необходимо написать скрипт, который будет при нажатии на кнопку ( .dropdown__trigger ) переключался класс show у элемента .dropdown :

Решение

Источник