Доступ к элементу через 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.

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

Декомпозиция процесса обработки событий

Метод handleEvent не обязательно должен выполнять всю работу сам. Он может вызывать другие методы, которые заточены под обработку конкретных типов событий (см. пример на картинке).

Теперь обработка событий разделена по методам, что упрощает поддержку кода.

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

textContent: просто текст

Свойство textContent предоставляет доступ к тексту внутри элемента за вычетом всех <тегов> (см. пример на картинке выше).

Как мы видим, возвращается только текст, как если бы все <теги> были вырезаны, но текст в них остался.
На практике редко появляется необходимость читать текст таким образом.

Намного полезнее возможность записывать текст в textContent, т.к. позволяет писать текст «безопасным способом».

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

Запись в textContent (безопасный способ)

Представим, что у нас есть произвольная строка, введённая пользователем, и мы хотим показать её.
- С innerHTML вставка происходит «как HTML», со всеми HTML-тегами.
- С textContent вставка получается «как текст», все символы трактуются буквально.

Сравним два тега div (см. пример выше на картинке).
- В первый <div> имя приходит «как HTML»: все теги стали именно тегами, поэтому мы видим имя, выделенное жирным шрифтом.
- Во второй <div> имя приходит «как текст», поэтому мы видим <b>Винни-пух!</b>.

В большинстве случаев мы рассчитываем получить от пользователя текст и хотим, чтобы он интерпретировался как текст. Мы не хотим, чтобы на сайте появлялся произвольный HTML-код. Присваивание через textContent – один из способов от этого защититься.

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