Управление элементами на HTML странице, DOM часть 3

  1. Методы для управления элементами на странице

    Все написанное капсом (заглавными буквами), является заранее выбранным объектом в DOM дереве
    # Как вызвать Что делает
    1 ELEMENT.addEventListener('EVENT', FUNCTION) Добавление "прослушки событий" для элемента
    2 ELEMENT.offsetTop/ELEMENT.offsetLeft и тд. Возвращает расстояние элемента по отношению к верхней части родительского узла
    3 pageYOffset/pageXOffset Возвращает количество пикселей, на которое прокручен документ по вертикали
    4 window.scrollY/window.scrollX Возвращает количество пикселей, на которое прокручен документ по вертикали (тоже самое что и pageYOffset)
    5 window.innerHeight/window.innerWidth Высота в пикселях видимой части экрана
    6 event.pageY/event.pageX Позиция курсора мыши на экране
    7 ELEMENT.clientHeight/ELEMENT.clientWidth Размер элемента
  2. Создайте страничку - Кликер

    Попробовать

  3. Создайте страничку, где вместо курсора мышки - круг и при нажатии на левую клавишу мыши курсор оставляет след

    Попробовать

  4. Создайте страничку, с параллакс эффектом

    Попробовать

Что почитать:

Справочник по событиям (addEventListener) Введение в браузерные события Координаты

Предыдущие js уроки

Урок 17 Урок 18 Урок 19 Урок 20 Урок 21 Урок 22 Урок 23 Урок 24 Урок 25