Свойства и методы объекта события

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

JavaScript предоставляет мощную систему событий, которая позволяет отслеживать различные действия пользователя и другие события, происходящие в браузере. Важным аспектом работы с событиями является объект события, который содержит информацию о событии и предоставляет методы для его обработки.

Когда событие происходит, браузер создает объект события, который содержит информацию об этом событии. Этот объект передается в обработчик события в качестве аргумента.

Свойства объекта события:

1. type: тип события (например, click, keydown).
2. target: элемент, на котором произошло событие.
3. currentTarget: элемент, к которому привязан обработчик события.
4. eventPhase: фаза, в которой находится событие (захват, цель, всплытие).
5. bubbles: логическое значение, указывающее, может ли событие всплывать.
6. cancelable: логическое значение, указывающее, можно ли отменить событие.
7. defaultPrevented: логическое значение, указывающее, было ли предотвращено действие по умолчанию.
8. timeStamp: время, когда событие было создано.
9. isTrusted: логическое значение, указывающее, было ли событие инициировано пользователем или скриптом.

Методы объекта события:

1. preventDefault(): отменяет действие по умолчанию, связанное с событием.
2. stopPropagation(): останавливает дальнейшую передачу события.
3. stopImmediatePropagation(): останавливает дальнейшую передачу события и предотвращает выполнение других обработчиков событий для текущего элемента.

Пример использования объекта события:

<!DOCTYPE html>
<html>
  <head>
    <title>Event Object Example</title>
  </head>
  <body>
    <button id="myButton">Click me</button>

    <script>
      const button = document.getElementById('myButton');

      button.addEventListener('click', function(event) {
        console.log('Event type:', event.type); // Выведет: click
        console.log('Event target:', event.target); // Выведет: <button id="myButton">Click me</button>
        console.log('Current target:', event.currentTarget); // Выведет: <button id="myButton">Click me</button>
        console.log('Event phase:', event.eventPhase); // Выведет: 2 (Целевая фаза)
        console.log('Bubbles:', event.bubbles); // Выведет: true
        console.log('Cancelable:', event.cancelable); // Выведет: true
        console.log('Time stamp:', event.timeStamp); // Выведет время в миллисекундах
        console.log('Is trusted:', event.isTrusted); // Выведет: true
      });
    </script>
  </body>
</html>

6.2 События кликов (Mouse Events)

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

• click: событие клика
• dblclick: событие двойного клика
• mousedown: событие нажатия кнопки мыши
• mouseup: событие отпускания кнопки мыши
• mousemove: событие движения мыши
• mouseover: событие наведения мыши
• mouseout: событие уводы мыши

Пример:

<!DOCTYPE html>
<html>
  <head>
    <title>Mouse Events Example</title>
  </head>
  <body>
    <button id="myButton">Click Me</button>
    <script>
      const button = document.getElementById('myButton');

      button.addEventListener('click', function(event) {
        console.log('Button clicked');
        console.log('Event type:', event.type);
        console.log('Target element:', event.target);
      });
    </script>
  </body>
</html>

6.3 События загрузки (Load Events)

События загрузки происходят, когда ресурс завершает загрузку:

• load: событие, которое происходит, когда ресурс/страница полностью загружена
• DOMContentLoaded: событие, которое происходит, когда начальная HTML-документация загружена и разобрана без ожидания полной загрузки таблиц стилей, изображений и подкадров

Пример:

<!DOCTYPE html>
<html>
  <head>
    <title>Load Events Example</title>
  </head>
  <body>
    <script>
      window.addEventListener('load', function(event) {
        console.log('Window fully loaded');
      });

      document.addEventListener('DOMContentLoaded', function(event) {
        console.log('DOM fully loaded and parsed');
      });
    </script>
  </body>
</html>

6.4 События фокуса (Focus Events)

События фокуса генерируются, когда элемент получает или теряет фокус.

• focus: событие, которое происходит, когда элемент получает фокус
• blur: событие, которое происходит, когда элемент теряет фокус

Пример:

<!DOCTYPE html>
<html>
  <head>
    <title>Focus Events Example</title>
  </head>
  <body>
    <input type="text" id="textInput" placeholder="Type something...">
    <script>
      const input = document.getElementById('textInput');

      input.addEventListener('focus', function(event) {
        console.log('Input field focused');
      });

      input.addEventListener('blur', function(event) {
        console.log('Input field lost focus');
      });
    </script>
  </body>
</html>

6.5 События клавиатуры (Keyboard Events)

События клавиатуры генерируются, когда пользователь нажимает клавиши на клавиатуре:

• keydown: событие, которое происходит, когда клавиша нажата
• keyup: событие, которое происходит, когда клавиша отпущена
• keypress: событие, которое происходит, когда клавиша нажата и отпущена (устаревшее событие, не рекомендуется к использованию)

Пример:

<html>
  <head>
    <title>Keyboard Events Example</title>
  </head>
  <body>
    <input type="text" id="textInput" placeholder="Type something...">
    <script>
      const input = document.getElementById('textInput');

      input.addEventListener('keydown', function(event) {
        console.log('Key down:', event.key);
      });

      input.addEventListener('keyup', function(event) {
        console.log('Key up:', event.key);
      });
    </script>
  </body>
</html>