Использование свойства 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 более универсален. Хотя заметим, что таких событий меньшинство, это скорее исключение, чем правило.

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

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

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

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

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

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

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

А с чего можно начать изучение, если совершенно не знаешь английского? Вокруг столько курсов и марафонов, что можно потеряться.

👉🏼 И мы нашли для вас проверенный базовый курс английского EngLove.

На этом курсе:
➡️ вы точно увидите результат и заговорите на английском через 3 месяца
➡️ нет обучения на потоке
➡️ каждому ученику ежедневно даётся обратная связь 💪

❇️ Для кого этот курс?
📌 для тех, кому фраза “I very good speak English” кажется правильной
📌 для тех, кто вообще не изучал английский или изучал в школе/на курсах/в университете, но ничего не помнит

❇️ Что требуется от вас:
📌 В течение 3 месяцев стабильно заниматься английским 60 минут в день.
📌 раз в неделю на выходных заниматься 60 минут устно в мини-группе с преподавателем и носителем языка.

❇️ Что вы получите:
📌 Вы будете знать базу грамматики и лексики английского языка, которая поможет вам развиваться дальше.
📌 Вы сможете преодолеть языковой барьер, так как на курсе есть носитель языка.

🚀 Старт 3-го потока - 12 сентября.

Подписывайтесь также на телеграмм-канал курса, где очень много полезного! 😉

Основные свойства объекта event

event.type — тип события, в данном случае "click".

event.currentTarget — элемент, на котором сработал обработчик. Значение – обычно такое же, как и у this, но если обработчик является функцией-стрелкой или при помощи bind привязан другой объект в качестве this, то мы можем получить элемент из event.currentTarget.

event.clientX / event.clientY — координаты курсора в момент клика относительно окна, для событий мыши.

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

Объект события доступен и в HTML

При назначении обработчика в HTML, тоже можно использовать объект event.

Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: f
unction(event) { alert(event.type) }.

То есть, её первый аргумент называется "event", а тело взято из атрибута.

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

Объект-обработчик: handleEvent

Мы можем назначить обработчиком не только функцию, но и объект при помощи addEventListener. В этом случае, когда происходит событие, вызывается метод объекта handleEvent.

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