События браузера

Событие – это сигнал о том, что что-то произошло. Например, срабатывание будильника — это своего рода сигнал, призыв к действию.

События происходят во многих элементах. Давайте посмотрим на те, которые постоянно используются.

**События клавиатуры**

— 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>