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

Ние използваме EventListeners в Javascript, за да накараме статичния HTML елемент да извършва определени действия, когато върху него се щракне или когато мишката се премести върху него, или когато въведете конкретен клавиш от keyboard.

Има различни типове слушатели на събития и се използват за различни функции, но ще говорим за няколко основни слушатели на събития, за да разберем как работи.

Всеки тип слушатели на събития работи с различни методи.

Click = when the 'onclick' event is applied to a specific element it will be active when that element is clicked and performs specified action.
KeyUp / KeyDown = These types comes in 'KeyBoard' events which listens actively all the key which is being pressed and displays which key  value of it.
KeyUp - For every key press it listens after the pressed key comes up to default position.
KeyDown - For every key press it listens and responds when the key goes down.
focus / blur = "focus" event is been called on focusing particular element. "blur" event is called to remove the focus from that particular element.
mousemove up/down = This event listeners will be active until the web page is active and will be aware of the present position of the mouse all the time.
up/down - mouse 'up' and 'down' listeners are for actively listening the mouse moving up and down from a particular element.

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

За да добавите слушатели на събития, например ‘onclick’ към елемент на бутон, изберете този конкретен елемент на бутон чрез DOM дърво от className, tagName или По IdName и добавете слушателя на събития ‘onclick’ като първи параметър към слушателя на събития, за да посочите състоянието на слушане, за което трябва слушайте активно. Вторият параметър е името на функцията, в която са посочени действията.

Ex: HTML element 
<button class='addBook'>Add</button>
select the above element in DOM tree.
var addBook = document.querySelector('.addBok');
adding event listener for that selected element.
addBook.addEventListenr('onclick', storeBookName);
write the function storeBookName() which will have set actions to perform for 'onclick'
note: while passing the function parameter do not use parenthesis just write the function name.

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

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

В горното изображение е щракнато върху елемента, който е в dark blue във формуляра и потокът на Улавяне на събитие е показан в червен цвят, а Булиране на събитие е показан в зелен цвят .

Заснемане на събитие: когато щракнете върху елемент, където са избрани всички елементи, той улавя елемента, върху който е щракнато от дървото на DOM до всички подчинени елементи, докато достигне елемента, върху който е щракнато.

Възникване на събитие: Тъй като събитието е уловено и местоположението на елемента е намерено от този елемент, то продължава да избухва като невидима вибрация, която ще премине към всички DOM дървовидни елементи.

Разпространение на събитие: разпространението на събитие е target, от което започва да улавя събитието. ако се приложи stopPropagation(), той слуша само този конкретен елемент, вместо да избухва.