Введение в браузерные события

Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).

Вот список самых часто используемых DOM-событий, пока просто для ознакомления:

События мыши:
click – происходит, когда кликнули на элемент левой кнопкой мыши.
contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
mouseover / mouseout – когда мышь наводится на / покидает элемент.
mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
mousemove – при движении мыши.

События на элементах управления:
submit – пользователь отправил форму <form>.
focus – пользователь фокусируется на элементе.

Клавиатурные события:
keydown и keyup – когда пользователь нажимает / отпускает клавишу.

События документа:
DOMContentLoaded – когда HTML загружен и обработан.

CSS events:
transitionend – когда CSS-анимация завершена.

Существует множество других событий. О них в следующих постах.

#браузер #документ #события

Обработчики событий

Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло.

Именно благодаря обработчикам JavaScript-код может реагировать на действия пользователя.

Есть несколько способов назначить событию обработчик. Мы их рассмотрим, начиная с самого простого.

#браузер #документ #события

Использование атрибута HTML

Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on<событие>.

Например, чтобы назначить обработчик события click на элементе input, можно использовать атрибут onclick.

#браузер #документ #события

Найти работу в айти можно 2 методами:

Первый. Бесконечно скроллить HeadHunter и пытаться что-то выклевать на LinkedIN. Офигеть от условий и закрыть.

Второй. Подписаться на JavaScript Job. Это база адекватных предложений, где даже для новичков много мест с хорошей з/п.

Тут найдете работу как в Яндексе (именно сюда крупняки присылают вакансии напрямую), так и в молодых стартапах!

В общем, не теряйте времени и находите работу в 2 клика: @JScript_jobs

Использование свойства DOM-объекта

Можно назначать обработчик, используя свойство DOM-элемента on<событие>.

К примеру, elem.onclick.

Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство.

#браузер #документ #события

Обработчик в атрибуте и свойстве

Обработчик всегда хранится в свойстве DOM-объекта, а атрибут – лишь один из способов его инициализации.

Так как у элемента DOM может быть только одно свойство с именем onclick, то назначить более одного обработчика так нельзя.

P.S. Два примера кода на картинке работают одинаково.

#браузер #документ #события

HTML-атрибуты

В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них.

Таким образом, когда у элемента есть id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит,
если атрибут нестандартный.

#браузер #документ #атрибуты_свойств

Доступ к элементу через this

Внутри обработчика события this ссылается на текущий элемент, то есть на тот, на котором, как говорят, «висит» (т.е. назначен) обработчик.

В коде выше button выводит своё содержимое, используя this.innerHTML.

#браузер #документ #события

Частые ошибки

Если вы только начинаете работать с событиями, обратите внимание на следующие моменты.

Функция должна быть присвоена как sayThanks, а не sayThanks().

Если добавить скобки, то sayThanks() – это уже вызов функции, результат которого (равный undefined, так как функция ничего не возвращает) будет присвоен onclick. Так что это не будет работать.

#браузер #документ #события

Используйте именно функции, а не строки.

Назначение обработчика строкой elem.onclick = "alert(1)" также сработает. Это сделано из соображений совместимости, но делать так не рекомендуется.

#браузер #документ #события

Не используйте setAttribute для обработчиков

Такой вызов работать не будет, т.к. setAttribute приводит все в строковый тип.

#браузер #документ #события

Регистр DOM-свойства имеет значение

Используйте elem.onclick, а не elem.ONCLICK, потому что DOM-свойства чувствительны к регистру.

#браузер #документ #события

addEventListener

Метод EventTarget.addEventListener() регистрирует определённый обработчик события, вызванного на EventTarget.

Данный метод позволяет "вешать" несколько обработчиков одного и того же события на один элемент. Именно благодаря этому является более предпочтительным вариантом обработки событий.

#браузер #документ #события

Свойство «hidden»

Атрибут и DOM-свойство «hidden» указывает на то, видим ли мы элемент или нет.
Мы можем использовать его в HTML или назначать при помощи JavaScript, как в примере ниже (см. пример выше на картинке).

Технически, hidden работает так же, как style="display:none". Но его применение проще.

#браузер #документ #свойства_узлов

Делать сайты не так сложно как кажется!

На нашем втором канале Полезная вЁрстка можно найти готовые решения ежедневных задач, с которыми сталкиваются веб-разработчики.

Подписывайся на канал и получай новые идеи!

removeEventListener

Удаляет обработчик события, который был зарегистрирован при помощи EventTarget.addEventListener(). Обработчик определяется типом события, самой функцией обработки события, и дополнительными параметрами, переданными при регистрации обработчика.

#браузер #документ #события

Удаление требует именно ту же функцию

Для удаления нужно передать именно ту функцию-обработчик которая была назначена.

Первый вариант не сработает, т.к. в removeEventListener передана не та же функция, а другая, с одинаковым кодом, но это не важно.

Обратим внимание – если функцию обработчик не сохранить где-либо, мы не сможем её удалить. Нет метода, который позволяет получить из элемента обработчики событий, назначенные через addEventListener.

#браузер #документ #события

Йоу йоу йоу, тут у наших ребят свой прямой эфир намечается - будет полезно) 👇👇👇

Вебинар про карьерный рост 🔥

Друзья, уже в следующую среду, мы с Полиной — нашим HR ментором, планируем провести вебинар по карьерному росту в компании.

О чем поговорим? 🤓

— что можно считать карьерным ростом (на этот счет есть разные мнения)
— кто отвечает за карьерный рост сотрудников
— какие есть возможности и ограничения в компаниях разных типов
— что делать, если хочешь роста
— что делать, если не хочешь роста, а тебя “растят”
— обсудим ваши вопросы (можете прислать их заранее)

Где и во сколько? 📅

В среду (24.08) в 19:00 по мск.
Как всегда, в видео чате нашего тг канала.

Подписывайтесь на наш канал, чтобы не пропустить 😎

Всех ждем-с! ✌️

Обработчики некоторых событий можно назначать только через addEventListener

Существуют события, которые нельзя назначить через DOM-свойство, но можно через addEventListener.

Например, таково событие DOMContentLoaded, которое срабатывает, когда завершена загрузка и построение DOM документа.

Так что addEventListener более универсален. Хотя заметим, что таких событий меньшинство, это скорее исключение, чем правило.

#браузер #документ #события

Объект события

Чтобы хорошо обработать событие, могут понадобиться детали того, что произошло. Не просто «клик» или «нажатие клавиши», а также – какие координаты указателя мыши, какая клавиша нажата и так далее.

Когда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику.

Пример выше демонстрирует получение координат мыши из объекта события.

#браузер #документ #события