JavaScript заметки

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

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

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

Сейчас уже ни для кого не секрет, что, если вы хотите устроиться в хорошую компанию и стремительно продвигаться вверх по карьерной лестнице, то очень важно знание английского языка. А с чего можно начать изучение, если совершенно не знаешь английского? Вокруг столько курсов и марафонов, что можно потеряться. 👉🏼 И мы нашли для вас проверенный базовый курс английского EngLove. На этом курсе: ➡️ вы точно увидите результат и заговорите на английском через 3 месяца ➡️ нет обучения на потоке ➡️ каждому ученику ежедневно даётся обратная связь 💪 ❇️ Для кого этот курс? 📌 для тех, кому фраза “I very good speak English” кажется правильной 📌 для тех, кто вообще не изучал английский или изучал в школе/на курсах/в университете, но ничего не помнит ❇️ Что требуется от вас: 📌 В течение 3 месяцев стабильно заниматься английским 60 минут в день. 📌 раз в неделю на выходных заниматься 60 минут устно в мини-группе с преподавателем и носителем языка. ❇️ Что вы получите: 📌 Вы будете знать базу грамматики и лексики английского языка, которая поможет вам развиваться дальше. 📌 Вы сможете преодолеть языковой барьер, так как на курсе есть носитель языка. 🚀 Старт 3-го потока - 12 сентября. Подписывайтесь также на телеграмм-канал курса, где очень много полезного! 😉

Объект события Чтобы хорошо обработать событие, могут понадобиться детали того, что произошло. Не просто «клик» или «нажатие клавиши», а также – какие координаты указателя мыши, какая клавиша нажата и так далее. Когда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику. Пример выше демонстрирует получение координат мыши из объекта события. #браузер #документ #события

Обработчики некоторых событий можно назначать только через addEventListener Существуют события, которые нельзя назначить через DOM-свойство, но можно через addEventListener. Например, таково событие DOMContentLoaded, которое срабатывает, когда завершена загрузка и построение DOM документа. Так что addEventListener более универсален. Хотя заметим, что таких событий меньшинство, это скорее исключение, чем правило. #браузер #документ #события

Вебинар про карьерный рост 🔥 Друзья, уже в следующую среду, мы с Полиной — нашим HR ментором, планируем провести вебинар по карьерному росту в компании. О чем поговорим? 🤓 — что можно считать карьерным ростом (на этот счет есть разные мнения) — кто отвечает за карьерный рост сотрудников — какие есть возможности и ограничения в компаниях разных типов — что делать, если хочешь роста — что делать, если не хочешь роста, а тебя “растят” — обсудим ваши вопросы (можете прислать их заранее) Где и во сколько? 📅 В среду (24.08) в 19:00 по мск. Как всегда, в видео чате нашего тг канала. Подписывайтесь на наш канал, чтобы не пропустить 😎 Всех ждем-с! ✌️

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

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

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

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

Свойство «hidden» Атрибут и DOM-свойство «hidden» указывает на то, видим ли мы элемент или нет. Мы можем использовать его в HTML или назначать при помощи JavaScript, как в примере ниже (см. пример выше на картинке). Технически, hidden работает так же, как style="display:none". Но его применение проще. #браузер #документ #свойства_узлов

​​Frontender's notes - самый большой канал по фронту с годной инфой по HTML, CSS, JS, TypeScript, React, Node.js и развитию Soft-skills, а также разборы вопросов для интервью и подборка крутых статей c опытом релокации айтишников в другие страны. Вам сюда: 👉 @frontendnoteschannel Ну а если вы любите почитать статейки о вебе в оригинале то вот сюда 👉 @frontend_international В общем добро пожаловать!

addEventListener Метод EventTarget.addEventListener() регистрирует определённый обработчик события, вызванного на EventTarget. Данный метод позволяет "вешать" несколько обработчиков одного и того же события на один элемент. Именно благодаря этому является более предпочтительным вариантом обработки событий. #браузер #документ #события

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

Не используйте setAttribute для обработчиков Такой вызов работать не будет, т.к. setAttribute приводит все в строковый тип. #браузер #документ #события

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

Frontend Vollex – здесь команда фронтендщиков из OZON обучает создавать красивые сайты и приложения, используя такие эффекты.  Канал читают как новички, так и опытные программисты. Подписывайся: @vollex_frontend

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

Доступ к элементу через this Внутри обработчика события this ссылается на текущий элемент, то есть на тот, на котором, как говорят, «висит» (т.е. назначен) обработчик. В коде выше button выводит своё содержимое, используя this.innerHTML. #браузер #документ #события