Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте Робота з подіями клавіатури та миші | Обробка Подій та Взаємодія з Користувачем у JavaScript
Просунуте Володіння JavaScript

bookРобота з подіями клавіатури та миші

Події клавіатури та миші дозволяють розробникам фіксувати та реагувати на взаємодію користувача. Ефективна обробка введення користувача дає змогу надавати зворотний зв'язок, виконувати певні дії або покращувати загальний досвід користувача.

Події клавіатури

Події клавіатури виникають, коли користувачі взаємодіють із клавіатурою. Існує два основних типи подій клавіатури:

У текстовому редакторі або будь-якій формі, де користувачі вводять текст, часто потрібно фіксувати певні комбінації клавіш (наприклад, Ctrl + S для збереження або Ctrl + Z для скасування). Розглянемо приклад, у якому певні клавіші фіксуються для імітації виявлення комбінацій у формі.

index.html

index.html

index.css

index.css

index.js

index.js

copy

У цьому прикладі користувачі вводять текст у поле введення, а скрипт фіксує поширені комбінації клавіш, такі як Ctrl + S для збереження або Ctrl + Z для скасування дії.

Обробка подій миші

Події миші виникають, коли користувачі взаємодіють із мишею або тачпадом. Найчастіше використовувані події миші:

Створимо приклад, у якому підказка відображається при наведенні курсору миші на кнопку.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Надання швидкої, контекстної інформації без перевантаження інтерфейсу — поширений випадок використання, що підвищує зручність та допомагає користувачам орієнтуватися у складних інтерфейсах.

Практичний приклад: Редагування по подвійному кліку з дією збереження

У багатьох сучасних веб-додатках користувачі можуть редагувати елемент подвійним кліком (наприклад, перейменування файлу або оновлення завдання) та зберігати зміни.

index.html

index.html

index.css

index.css

index.js

index.js

copy

У цьому прикладі спочатку абзац відображає завдання, яке стає доступним для редагування після подвійного кліку, показуючи поле вводу та кнопку "Зберегти". Користувач може змінити завдання та натиснути "Зберегти" для застосування змін; така реалізація запобігає випадковим змінам при одинарному кліку. Після збереження з'являється повідомлення про успішне оновлення або помилку, якщо поле порожнє.

1. Що робить подія keydown?

2. Яка подія миші виникає, коли вказівник входить у область елемента?

question mark

Що робить подія keydown?

Select the correct answer

question mark

Яка подія миші виникає, коли вказівник входить у область елемента?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 6

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 2.22

bookРобота з подіями клавіатури та миші

Свайпніть щоб показати меню

Події клавіатури та миші дозволяють розробникам фіксувати та реагувати на взаємодію користувача. Ефективна обробка введення користувача дає змогу надавати зворотний зв'язок, виконувати певні дії або покращувати загальний досвід користувача.

Події клавіатури

Події клавіатури виникають, коли користувачі взаємодіють із клавіатурою. Існує два основних типи подій клавіатури:

У текстовому редакторі або будь-якій формі, де користувачі вводять текст, часто потрібно фіксувати певні комбінації клавіш (наприклад, Ctrl + S для збереження або Ctrl + Z для скасування). Розглянемо приклад, у якому певні клавіші фіксуються для імітації виявлення комбінацій у формі.

index.html

index.html

index.css

index.css

index.js

index.js

copy

У цьому прикладі користувачі вводять текст у поле введення, а скрипт фіксує поширені комбінації клавіш, такі як Ctrl + S для збереження або Ctrl + Z для скасування дії.

Обробка подій миші

Події миші виникають, коли користувачі взаємодіють із мишею або тачпадом. Найчастіше використовувані події миші:

Створимо приклад, у якому підказка відображається при наведенні курсору миші на кнопку.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Надання швидкої, контекстної інформації без перевантаження інтерфейсу — поширений випадок використання, що підвищує зручність та допомагає користувачам орієнтуватися у складних інтерфейсах.

Практичний приклад: Редагування по подвійному кліку з дією збереження

У багатьох сучасних веб-додатках користувачі можуть редагувати елемент подвійним кліком (наприклад, перейменування файлу або оновлення завдання) та зберігати зміни.

index.html

index.html

index.css

index.css

index.js

index.js

copy

У цьому прикладі спочатку абзац відображає завдання, яке стає доступним для редагування після подвійного кліку, показуючи поле вводу та кнопку "Зберегти". Користувач може змінити завдання та натиснути "Зберегти" для застосування змін; така реалізація запобігає випадковим змінам при одинарному кліку. Після збереження з'являється повідомлення про успішне оновлення або помилку, якщо поле порожнє.

1. Що робить подія keydown?

2. Яка подія миші виникає, коли вказівник входить у область елемента?

question mark

Що робить подія keydown?

Select the correct answer

question mark

Яка подія миші виникає, коли вказівник входить у область елемента?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 6
some-alt