Много уеб приложения разчитат на някаква форма на събитие, за да изпълняват своите функции. В даден момент човек взаимодейства с интерфейса си, което генерира събитие. Тези водени от човека събития обикновено разчитат на периферно устройство, като мишка или клавиатура.

Когато дадено устройство създаде събитие, програмата може да го изслуша, за да знае кога да извърши конкретно поведение. В този урок ще научите как да слушате събития с помощта на JavaScript.

Какво е програмиране, управлявано от събития?

Програмирането, управлявано от събития, е името на парадигма, която разчита на изпълнението на събитие, за да изпълни своите функции. Възможно е да създадете управлявана от събития програма на всеки език за програмиране от високо ниво. Но програмирането, управлявано от събития, е най-често срещано в езици като JavaScript, които се интегрират с потребителски интерфейс.

Какво е слушател на събития?

Слушател на събитие е функция, която инициира предварително дефиниран процес, ако възникне конкретно събитие. И така, слушател на събитие „слуша“ за действие, след което извиква функция, която изпълнява свързана задача. Това събитие може да приеме една от многото форми. Често срещаните примери включват събития на мишката, събития на клавиатурата и събития на прозореца.

Създаване на слушател на събития с помощта на JavaScript

Можете да слушате за събития на всеки елемент в DOM. JavaScript има addEventListener() функция, която можете да извикате на всеки елемент на уеб страница. В addEventListener() функцията е метод на Цел на събитието интерфейс. Всички обекти, които поддържат събития, реализират този интерфейс. Това включва прозореца, документа и отделните елементи на страницата.

Функцията addEventListener() има следната основна структура:

element.addEventListener("събитие", functionToExecute);

Където:

• на елемент може да представлява всеки HTML маркер (от бутон до параграф)
• на "събитие" е низ, именуващ конкретно, разпознато действие
• на functionToExecute е препратка към съществуваща функция

Нека създадем следната уеб страница, която има няколко HTML елемента:

Добре дошли


 Здравейте, добре дошли в моя уебсайт.


Научете повече





Информация за потребителя

Потребителско име: 

Изпращане

HTML кодът по-горе създава проста страница, която се свързва към JavaScript файл, наречен app.js. В app.js файл ще съдържа кода за настройка на слушателите на събития. Така че, ако искате да стартирате конкретен процес всеки път, когато потребител щракне върху първия бутон на уеб страницата, това е файлът, в който да го създадете.

Файлът app.js

document.querySelector('.btn').addEventListener("клик", clickDemo)
функция clickDemo(){
 console.log("Здравей")
}

JavaScript кодът по-горе осъществява достъп до първия бутон на страницата с помощта на querySelector() функция. След това добавя слушател на събитие към този елемент, използвайки addEventListener() метод. Конкретното събитие, което слуша, има името „щракване“. Когато бутонът задейства това събитие, слушателят ще извика clickDemo() функция.

Свързани: Научете как да използвате DOM селектори

В clickDemo() функцията отпечатва „Здравей“ на конзолата на браузъра. Всеки път, когато щракнете върху бутона, трябва да видите този изход във вашата конзола.

Изход на събитие „щракване“.

Какво представляват събитията на мишката?

JavaScript има MouseEvent интерфейс, който представя събития, възникващи поради взаимодействието на потребителя с мишката. Няколко събития използват MouseEvent интерфейс. Тези събития включват следното:

• щракнете
• dblclick
• движение на мишката
• задържане на курсора на мишката
• mouseout
• мишка
• mousedown

В щракнете Събитието възниква, когато потребителят натисне и пусне бутон на мишката, докато показалецът му е над елемент. Точно това се случи в предишния пример. Както можете да видите от списъка по-горе, събитията с мишката могат да приемат много форми.

Друго често срещано събитие на мишката е dblclick, което означава двойно щракване. Това се задейства, когато потребителят щракне върху бутон на мишката два пъти в бърза последователност. Забележително нещо за addEventListener() функцията е, че можете да го използвате, за да присвоите множество слушатели на събития към един елемент.

Добавяне на събитие dblclick към първия бутон

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
функция dblclickDemo(){
 alert("Това е демонстрация как да създадете събитие с двойно щракване")
}

Добавянето на кода по-горе към файла app.js ефективно ще създаде втори слушател на събитие за първия бутон на уеб страницата. И така, щракването на първия бутон два пъти ще създаде следното предупреждение в браузъра:

На изображението по-горе ще видите генерираното предупреждение и също така ще видите, че още два изхода „Здравей“ са в конзолата. Това е така, защото събитието с двойно щракване е комбинация от две събития за щракване и има слушатели на събития и за двете щракнете и на dblclick събития.

Имената на другите събития с мишката в списъка описват тяхното поведение. В движение на мишката събитие се случва всеки път, когато потребителят премести мишката си, когато курсорът е над елемент. В мишка Събитието възниква, когато потребителят задържи бутон върху елемент, след което го освободи.

Какво представляват клавиатурните събития?

JavaScript има KeyboardEvent интерфейс. Това прослушва взаимодействията между потребителя и неговата клавиатура. В миналото, KeyboardEvent имаше три типа събития. Оттогава обаче JavaScript отхвърли натискане на клавиш събитие.

Така че ключ и клавиша надолу събитията са единствените две препоръчани клавиатурни събития, които са всичко, от което се нуждаете. В клавиша надолу Събитието възниква, когато потребителят натисне клавиш и ключ събитие възниква, когато потребителят го освободи.

Преразглеждайки HTML примера по-горе, най-доброто място за добавяне на слушател на събития от клавиатурата е на вход елемент.

Добавяне на слушател на събития от клавиатура към файла app.js

let greetings = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
функция captureInput (e){
 greetings.innerText = (`Здравейте, ${e.target.value}, добре дошли в моя уебсайт.`)
}

Кодът по-горе използва querySelector() функция за достъп до абзаца и вход елементи на страницата. След това извиква addEventListener() метод на вход елемент, който слуша за ключ събитие. Всеки път, когато а ключ настъпи събитие, captureInput() функцията взема стойността на ключа и я добавя към абзаца на страницата. В д параметърът представлява събитието, което JavaScript присвоява автоматично. Този обект на събитие има свойство цел, което е препратка към елемента, с който е взаимодействал потребителят.

В този пример етикетът, прикрепен към вход полето изисква потребителско име. Ако въведете името си в полето за въвеждане, тогава уеб страницата ще изглежда така:

Сега параграфът съдържа входната стойност, която в примера по-горе е „Джейн Доу“.

addEventListener улавя всички видове потребителски взаимодействия

Тази статия ви запозна с addEventListener() метод, както и няколко събития с мишката и клавиатурата, които можете да използвате с него. В този момент знаете как да слушате за конкретно събитие и как да създадете функция, която да реагира на него.

В addEventListener предоставя допълнителни възможности обаче чрез третия си параметър. Можете да го използвате, за да контролирате разпространението на събития: реда, в който събитията се преместват от елементи към техните родители или деца.

Разбиране на разпространението на събития в JavaScript

Събитията са мощна функция на JavaScript. Разбирането как уеб браузърът ги издига срещу елементи е ключът към овладяването на тяхното използване.

Прочетете Следващото

За автора