Обработка событий в JavaScript: руководство для разработчиков

document.addEventListener('click', function(event) {
    console.log('Клик по координатам:', event.clientX, event.clientY);
});

 document.addEventListener('dblclick', function() {
    console.log('Двойной клик');
});

 document.addEventListener('mousedown', function() {
    console.log('Нажатие кнопки мыши');
});

 document.addEventListener('mouseup', function() {
    console.log('Отпускание кнопки мыши');
});

document.addEventListener('mousemove', function(event) {
    console.log('Позиция курсора:', event.pageX, event.pageY);
});

 document.addEventListener('mouseover', function() {
    console.log('Курсор над элементом');
});

 document.addEventListener('mouseout', function() {
    console.log('Курсор покинул элемент');
});

document.addEventListener('keydown', function(event) {
    console.log('Нажата клавиша:', event.key);
});

 document.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        console.log('Нажата Enter');
    }
});

document.addEventListener('keydown', function(event) {
    if (event.key === '@') {
        event.preventDefault(); // Предотвращает стандартное поведение клавиши
        alert('Символ @ не разрешен');
    }
});

document.addEventListener('scroll', function() {
    console.log('Страница прокручена');
    console.log('Текущая позиция:', window.scrollY);
});

window.addEventListener('resize', function() {
    console.log('Размер окна изменён');
    console.log('Ширина:', window.innerWidth);
    console.log('Высота:', window.innerHeight);
});

document.addEventListener('wheel', function(event) {
    console.log('Прокрутка колесика мыши');
    console.log('DeltaY:', event.deltaY); // Вертикальная прокрутка
    console.log('DeltaX:', event.deltaX); // Горизонтальная прокрутка
});

const element = document.querySelector('.touch-area');

element.addEventListener('touchstart', function(event) {
    console.log('Касание началось');
    console.log('Количество касаний:', event.touches.length);
});

element.addEventListener('touchmove', function(event) {
    console.log('Палец перемещается');
    console.log('Текущие координаты:', event.touches[0].clientX, event.touches[0].clientY);
});

element.addEventListener('touchend', function(event) {
    console.log('Касание завершено');
});

function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

// Применение throttle
element.addEventListener('scroll', throttle(handleScroll, 16));

// { passive: true } улучшает производительность на мобильных устройствах
window.addEventListener('scroll', handleScroll, { passive: true });

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM готов к работе');
});

window.addEventListener('load', function() {
    console.log('Все ресурсы загружены');
});

document.addEventListener('visibilitychange', function() {
    console.log('Статус видимости изменён:', document.hidden);
});

window.addEventListener('beforeprint', function() {
    console.log('Подготовка к печати');
});

window.addEventListener('afterprint', function() {
    console.log('Печать завершена');
});

document.getElementById('mySelect').addEventListener('change', (e) => {

    log.textContent += `Change (Select): Выбрано значение "${e.target.value}"\n`;

});

 document.addEventListener('submit', function(event) {
    event.preventDefault(); // Предотвращаем отправку формы
    console.log('Форма отправлена');
});

 document.addEventListener('reset', function() {
    console.log('Форма сброшена');
});

document.addEventListener('focus', function() {
    console.log('Элемент получил фокус');
}, true); //

document.addEventListener('blur', function() {
    console.log('Фокус потерян');
});

const mediaElement = document.querySelector('video, audio');

mediaElement.addEventListener('play', function() {
    console.log('Воспроизведение начато');
});

const mediaElement = document.querySelector('video, audio');

mediaElement.addEventListener('pause', function() {
    console.log('Воспроизведение приостановлено');
});

const mediaElement = document.querySelector('video, audio');

mediaElement.addEventListener('ended', function() {
    console.log('Воспроизведение завершено');
});

const mediaElement = document.querySelector('video, audio');
 
mediaElement.addEventListener('timeupdate', function() {
    console.log('Изменение времени воспроизведения');
});