Объект события Event

Объект события Event

Здравствуйте! Продолжаем разбираться с событиями в JavaScript  и на очереди у нас собственно объект события (Event).  Как правило при  обработке события браузер  может автоматически передать в функцию обработчика события  в качестве параметра  некий объект Event, который  содержит всю информацию о событии. И с помощью  свойств этого объекта  мы  с вами можем получить эту информацию.

объект event в JavaScript

  • bubbles: вернет  true, если событие является всплывающим. Например, если событие возникло на дочернем элементе, то оно может быть обработано  и на родительском элементе.
  • cancelable: вернет true, если  есть возможность  отменить стандартную обработку события
  • currentTarget: указывает на  элемент, к которому  собственно прикреплен обработчик события
  • defaultPrevented: вернет true, если был вызван у Event метод preventDefault()
  • eventPhase: показывает этап обработки события
  • target:  содержит элемент на котором произошло событие
  • timeStamp:  время возникновения события
  • type:   показывает  имя события
  • clientX/ client Y:  позволяет получить координаты курсора мыши в момент события.

Здесь перечислены далеко не вс свойства, которые доступны в объекте Event.   Давайте рассмотрим пример.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#rect1{
width:10px;
height:100px;
background-color:blue;
}
</style>
</head>
<body>
<div id="rect1"></div>
<script>
function handle(event){

alert("Тип события: " + event.type);

alert(event.target);
}
let rect1 = document.querySelector("#rect1");
rect1.addEventListener("click", handle);
</script>
</body>
</html>

Просмотреть  пример

Как видно из примера по клику на элементе  выводится тип события.

Итоги

  • Объект Event содержит свойства, доступные в момент выполнения события
  • Этот объект передается как аргумент в функцию обработчик события

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться
Читайте также  События клавиатуры: keyup, keydown, keypress

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: