События браузера
Событие – это сигнал о том, что что-то произошло. Например, срабатывание будильника — это своего рода сигнал, призыв к действию.
События происходят во многих элементах. Давайте посмотрим на те, которые постоянно используются.
**События клавиатуры**
— keyup и keydown: когда клавиша нажата (вниз) и отпущена (вверх)
**События мыши**
— -mousemove: событие перемещения мыши.
— -mouseover/mouseout: событие выхода курсора мыши из элемента или нахождения над ним.
— -click: при щелчке мышью
— -mousedown/mouseup: событие, когда мышь нажата и затем отпущена.
**События форм**
— submit: для отправки формы
— -focus: когда элемент сфокусирован, например, тег inout.
**События CSS**
— перенесено: доработка css анимации.
Итак, следующий вопрос: что происходит, когда я нажимаю кнопку или отправляю форму или наводит курсор мыши на элемент. Типа, чего я ожидаю, когда происходит событие.
Здесь на помощь приходят обработчики событий.
**Обработчики событий**
Обычно это функция, которая вызывается, когда происходит событие. Например, мы можем написать функцию, которая предупреждает «привет» при нажатии кнопки. Функция является обработчиком событий.
Рассмотрим этот html
<body> <div class=”firstDiv”> hello </div> <input type=”button” class=”button” /> <script> </script> </body> </html>
**Три способа добавления прослушивателей событий**
**1 Метод свойства DOM**
Свойство DOM *onEventName* используется для назначения обработчика для прослушивания события и выполнения определенных действий.
Предположим, мы хотим предупредить «hello world» при нажатии кнопки. Вот как это сделать с помощью этого метода.
<script> let button = document.querySelector( ‘.button’ ); button.onclick = function(){ alert( ‘Hello world’ ); } </script>
**2 Атрибут HTML**
Внутри тега HTML мы можем напрямую назначить событие, вот оно
<input type=”button” class=”button” onclick=”alert( ‘hello world’ ) “/>
**3 addEventListeners**
Вот синтаксис
element.addEventListener( event, function() or handler )
Удаление события
element.removeEventListener( event, function() or handler )
С помощью метода addEventListener мы можем установить множество обработчиков для одного события. Например, мы можем предупредить о двух вещах, когда кнопка нажата.
<script> let button = document.querySelector( ‘.button’ ); button.addEventListener( ‘click’, function(){ alert( ‘hello worlds’ ) }); // second handler button.addEventListener( ‘click’, function(){ alert( ‘ANother hello world’ ) }) </script>
Метод addEvent является наиболее широко используемым методом.
**Событие (e)**
Объект события e или событие или любая переменная, которую вы хотите вызвать, является указателем на событие, которое было сгенерировано, плюс другие свойства объекта, которые упакованы внутри него как объект.
<script> let button = document.querySelector( ‘.button’ ); button.addEventListener( ‘click’, function( event ){ alert( ‘ANother hello world’ ); console.log( event ) }) </script>