События в JavaScript и обработчики событий. Способы назначить обработчик события. Список событий и справочник по событиям. Атрибут onClick и свойство onClick. Минусы использования свойства onClick.
Как правильно назначить обработчик событий в JavaScript? Метод addEventListener позволяет назначить для одного элемента несколько событий. Синтаксис метода addEventListener.
Объект 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. Эмуляторе мобильных устройств.