Прослушиватели событий — это своего рода активные функции или процедуры в программе, ожидающие возникновения события.

Мы используем 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(), то он прослушивает только этот конкретный элемент, а не всплывает.