Урок №20 - Обработчик событий

Урок №20 - Обработчик событий

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

Видеоурок

За счёт обработки действий мы можем понимать что сделал пользователь и в зависимости от действия выполнять определённый функционал на сайте. 


Для создания обработчика событий можно использовать метод bind() или же on(). В них необходимо указать какое действие мы отслеживаем, а также на каком блоке мы проверяем выполнение действия.


Пример реализации:

$("p").bind("mouseover", function () {
	// Этот код сработает только когда пользователь
	// наведет мышку на любой параграф на сайте.
	// Можно выполнять любые необходимые действия
});

Точно такую же функцию выполняет метод on(), но единственное отличается в синтаксисе записи:

$(document).on("dblclick", "#block", function(event) {
	// Код сработает при двойном нажатии на блок с id = block
	// Кроме того, мы можем получить данные про нажатие из
	// переменной event, которую мы получаем в качестве параметра
});

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

Исходный код

Весь код будет доступен после подписки на проект!

Онлайн редактор кода

Загрузка...

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

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

Также стоит посмотреть

Уроки React Native для начинающих / Разработка приложения с нуля
11 уроков
Изучение стека MEAN: MongoDB, Express, Angular и Node JS
10 уроков
Изучение React JS / Redux библиотеки
9 уроков
Создание динамического веб сайта
22 урока
Изучение таск-менеджера Gulp 4
5 уроков
Создание приложения на React JS / Использование API
7 уроков
Комментарии
Добавить комментарий

Пока комментариев нет