Полный курс по JavaScript - Часть 4

События в JavaScript и обработчики событий. Способы назначить обработчик события. Список событий и справочник по событиям. Атрибут onClick и свойство onClick. Минусы использования свойства onClick.

Как правильно назначить обработчик событий в JavaScript? Метод addEventListener позволяет назначить для одного элемента несколько событий. Синтаксис метода addEventListener.

Метод removeEventListener позволяет удалить обработчик события. Таким образом обработчик событий срабатывает столько раз сколько нам нужно.

Объект Event – это объект событий. Объект Event дает широкие возможности для обработки событий. Свойство target объекта Event позволяет получить доступ к элементу страницы и как-то с ним взаимодействовать.

Всплытие событий – обработчик сначала срабатывает на самом вложенном элементе, затем на родительском. Свойство event.currentTarget всегда совпадает с элементом, для которого было назначено событие.

Метод preventDefault объекта Event позволяет отменить стандартное поведение браузера в JavaScript. Как назначить один обработчик для нескольких элементов? Зная это, можно легко отменить стандартное поведение браузера для нескольких элементов страницы. Рассмотрим третий аргумент метода addEventListener - Свойство once: обработчик может быть вызван не более одного раза.

Навигация по веб-странице. Свойство documentElement. Родительские и дочерние элементы. Доступ к узлам DOM-дерева. Как работают: свойство parentNode, метод childNodes, свойства firstChild и lastChild; nextSibling и previousSibling. Что такое data-атрибуты?

Как получить доступ к элементам страницы в JavaScript. Свойства nextElementSibling и previousElementSibling. Методы parentElement, firstElementChild и lastElementChild. Метод childNodes - Как исключить узлы?

Практическая задача №2. Используем события на странице. Работа с формой. Добавление элементов на страницу при заполнении формы. Удаление элементов со страницы при клике по корзине.

Событие DOMContentLoaded — происходит, когда браузер разобрал веб-страницу и составил DOM-дерево. Событие load — загрузилась и веб-страница, и все ресурсы для её отображения: стили, картинки и т.д.

Примеры мобильных событий, возникающих при взаимодействии с сенсорным экраном: touchstart, touchmove и touchend. Свойство touches вызывает объект TouchList: количество пальцев, которые взаимодействуют с экраном. Свойства targetTouches и changedTouches. Эмуляторе мобильных устройств.

Асинхронное и последовательное выполнение скриптов в JavaScript. Атрибуты defer и async тега