Прослушиватели событий — это своего рода активные функции или процедуры в программе, ожидающие возникновения события.
Мы используем 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(), то он прослушивает только этот конкретный элемент, а не всплывает.