Events Overview - Google Web Designer

Здравствуйте. Меня зовут Мачек,
я специалист по Google Web Designer.

Сегодня я расскажу,
как использовать систему событий

в Google Web Designer.

Посмотрев видео,

вы узнаете, как настраивать
обработчики событий в документе.

Для примера я создал простой документ

с круговой галереей и синим элементом div.

Чтобы добавить в документ
обработчики событий,

открываем панель событий справа.

Здесь перечислены

все установленные обработчики событий.

В нашем примере
пока нет обработчиков,

поэтому список пустой.

Но если в документе
много обработчиков,

их можно упорядочивать и фильтровать.

Чтобы добавить обработчик
в этот список,

нужно открыть окно событий.

Есть несколько способов это сделать.

Если вы знаете цель,

то можно нажать на элемент
правой кнопкой мыши и выбрать

"Добавить событие".

При этом целью будет выбранный элемент.

Но мы сделаем по-другому.
Отменим выбор элемента

и откроем окно событий,
нажав на значок плюса в углу.

Окно откроется
без предустановленных настроек.

Сначала выберем

цель.

Это элемент, который
будет запускать обработчик событий.

В нашем примере выберем круговую галерею.

Теперь нужно выбрать событие

для запуска обработчика.

Большинство элементов поддерживают
события "Мышь" и "Касание".

Круговая галерея также поддерживает
специальные события.

Выбираю событие click.

Дальше нужно
выбрать действие.

Это действие, которое будет
выполняться в ответ на событие.

Для большинства элементов
можно настроить стили CSS

или добавить дополнительные действия.
Мы к ним ещё вернемся.

Если в документе есть
собственные элементы,

они могут поддерживать
и другие события.

В нашем примере выберем "Задать стили".

Теперь выберем получателя.

Это элемент, свойства CSS
которого будут изменяться.

В нашем примере выберем синий элемент div

и зададим для него свойства CSS –

изменим цвет фона на красный.

Задаем параметры динамики

и продолжительности и нажимаем "ОК",

чтобы сохранить.

Всё, мы добавили
обработчик событий в документ.

Теперь посмотрим, что получилось.

Как видите, когда я нажимаю
на круговую галерею, синий элемент div

медленно меняется на красный.

Довольно просто.

Предположим, что я ошибся

и нужно изменить обработчик событий.

Для этого не нужно
создавать новый обработчик,

можно изменить этот.

Если дважды нажать на обработчик,

откроется окно событий
в режиме редактирования.

Возвращаемся на вкладку "Действия"
и выбираем дополнительное действие.

Здесь можно написать любой
действительный код JavaScript.

Указываем имя функции

и для примера создаем оповещение.

Вот так.

Нажимаем "ОК", чтобы сохранить.

Как видите,
обработчик событий обновился –

добавился вызов функции.

Давайте посмотрим, что получилось.

Теперь, когда я нажимаю
на круговую галерею,

появляется оповещение

"Я люблю Google Web Designer!"

Это все, что я хотел рассказать.

Если у вас возникнут вопросы

о событиях или по другим темам,
касающимся Google Web Designer,

задавайте их в комментариях к видео.

Спасибо за внимание.