6.1 Объект события
JavaScript предоставляет мощную систему событий, которая позволяет отслеживать различные действия пользователя и другие события, происходящие в браузере. Важным аспектом работы с событиями является объект события, который содержит информацию о событии и предоставляет методы для его обработки.
Когда событие происходит, браузер создает объект события, который содержит информацию об этом событии. Этот объект передается в обработчик события в качестве аргумента.
Свойства объекта события:
type: тип события (например,click,keydown).target: элемент, на котором произошло событие.currentTarget: элемент, к которому привязан обработчик события.eventPhase: фаза, в которой находится событие (захват, цель, всплытие).bubbles: логическое значение, указывающее, может ли событие всплывать.cancelable: логическое значение, указывающее, можно ли отменить событие.defaultPrevented: логическое значение, указывающее, было ли предотвращено действие по умолчанию.timeStamp: время, когда событие было создано.isTrusted: логическое значение, указывающее, было ли событие инициировано пользователем или скриптом.
Методы объекта события:
preventDefault(): отменяет действие по умолчанию, связанное с событием.stopPropagation(): останавливает дальнейшую передачу события.stopImmediatePropagation(): останавливает дальнейшую передачу события и предотвращает выполнение других обработчиков событий для текущего элемента.
Пример использования объекта события:
HTML
<!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: событие уводы мыши
Пример:
HTML
<!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-документация загружена и разобрана без ожидания полной загрузки таблиц стилей, изображений и подкадров
Пример:
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: событие, которое происходит, когда элемент теряет фокус
Пример:
HTML
<!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
<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>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ