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

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

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

Відеоурок

Telegram group

Підписуйтесь на нашу групу в Телеграмі 🇺🇦

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


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


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

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

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

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

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

Вихідний код

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

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

Завантаження...

Завдання до уроку

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

Велике завдання за курсом

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

Також варто подивитися

Вивчення JavaScript для початківців з нуля!
15 уроків
Уроки Angular для начинающих
11 уроків
Уроки React Native для начинающих / Разработка приложения с нуля
11 уроків
Three.js с нуля: Разработка сайта с 3Д Графикой
10 уроків
Фреймворк Next JS / Изучение NextJS для начинающих
8 уроків
Курс Nuxt JS / Изучение Nuxt.js фреймворка
8 уроків
Коментарі
Додати коментар

Поки що коментарів немає