Заполняем пробелы - event flow
На этой неделе получил стажера для подготовки к собедесованию во внутреннюю лабораторию.
Это мой первый опыт менторства, и я подумал, что это хорошая возможность заполнить свои пробелы в теории / практикe.
Первый пробел касается темы событий - погружение и всплытие. Всегда четко помнил про второе - всплытие. Погружение напрочь вылетело.
Возможно, некоторые из вас тоже забыли стадии event flow:
- capture (перехват)
- target (цель)
- bubbling (всплытие)
Отловить событие на стадии перехвата можно, передав true в качестве 3 аргумента функции addEventListener
Немного о целевом элементе event.target:
event.target – это исходный элемент, на котором произошло событие,
event.currentTarget (он же this) - элемент, на котором выполняется обработчик.
Т.е если повесили обработчик на form:
event.currentTarget - элемент формы,
event.target - элемент внутри формы, на котором произошло событие.
Ссылки по теме:
https://learn.javascript.ru/event-bubbling
https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener
Если у вас есть что добавить или если я где-то наврал, пишите в личку @jem_jem, разберемся ;)
На этой неделе получил стажера для подготовки к собедесованию во внутреннюю лабораторию.
Это мой первый опыт менторства, и я подумал, что это хорошая возможность заполнить свои пробелы в теории / практикe.
Первый пробел касается темы событий - погружение и всплытие. Всегда четко помнил про второе - всплытие. Погружение напрочь вылетело.
Возможно, некоторые из вас тоже забыли стадии event flow:
- capture (перехват)
- target (цель)
- bubbling (всплытие)
Отловить событие на стадии перехвата можно, передав true в качестве 3 аргумента функции addEventListener
Немного о целевом элементе event.target:
event.target – это исходный элемент, на котором произошло событие,
event.currentTarget (он же this) - элемент, на котором выполняется обработчик.
Т.е если повесили обработчик на form:
event.currentTarget - элемент формы,
event.target - элемент внутри формы, на котором произошло событие.
Ссылки по теме:
https://learn.javascript.ru/event-bubbling
https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener
Если у вас есть что добавить или если я где-то наврал, пишите в личку @jem_jem, разберемся ;)
#web
Верхнеуровневая архитектура фронтенда. Лекция Яндекса
https://habr.com/company/yandex/blog/425611/
Верхнеуровневая архитектура фронтенда. Лекция Яндекса
https://habr.com/company/yandex/blog/425611/
Habr
Верхнеуровневая архитектура фронтенда. Лекция Яндекса
Выбор подходящей архитектуры — ключевая часть построения фронтенда сервиса. Разработчик Анна Карпелевич рассказала студентам Школы разработки интерфейсов, что такое архитектура, какие функции она...
Типичный сайт в 2018- ироническая демонстрация
https://www.reddit.com/r/web_design/comments/9pmqxb/
codepen edition https://codepen.io/cobra_winfrey/pen/MPqvwg
website edition https://2018.bloomca.me/en
https://www.reddit.com/r/web_design/comments/9pmqxb/
codepen edition https://codepen.io/cobra_winfrey/pen/MPqvwg
website edition https://2018.bloomca.me/en
reddit
Typical website in 2018
Posted in r/web_design by u/ikstark • 3,910 points and 186 comments
The State of JavaScript . Интервью с Addy Osmani о текущем состоянии JavaScript в вебе
https://www.youtube.com/watch?v=i5R7giitymk&feature=youtu.be
https://www.youtube.com/watch?v=i5R7giitymk&feature=youtu.be
YouTube
The State of JavaScript - The State of the Web
Rick speaks with Addy Osmani about the state of JavaScript. Addy is an Engineering Manager on the Google Chrome team, and he has been a web developer for 17 years. He has a deep understanding of JavaScript, as it is today and how it’s changed over the years…
3 ошибки производительности JavaScript, которые вы должны прекратить делать
https://hackernoon.com/3-javascript-performance-mistakes-you-should-stop-doing-ebf84b9de951
https://hackernoon.com/3-javascript-performance-mistakes-you-should-stop-doing-ebf84b9de951
Hackernoon
3 JavaScript Performance Mistakes You Should Stop Doing | HackerNoon
What if I told you everything you knew was a lie, what will happen if you learn some of the key features our beloved ECMAScript have published over the recent years, are actually dangerous performance traps, sugar coated in a slick looking one line callback…
#video
Видеоблог Вадима Макеева №7. KFC, SVG и лишний base64, вредная типа-доступность
https://www.youtube.com/watch?v=Eo3COLvWBFk
Видеоблог Вадима Макеева №7. KFC, SVG и лишний base64, вредная типа-доступность
https://www.youtube.com/watch?v=Eo3COLvWBFk
YouTube
KFC, SVG и лишний base64, вредная типа-доступность
00:00 Интро
00:24 Обзор сайта
00:59 Отключаем JS
02:55 Загрузка сайта
06:08 Анализ CSS
13:58 Как инлайнить SVG
16:37 Графика на сайте
20:29 Доступность руками
22:37 Аудит доступности
Нравится? Становитесь патронами — https://www.patreon.com/pepelsbey
SVGO…
00:24 Обзор сайта
00:59 Отключаем JS
02:55 Загрузка сайта
06:08 Анализ CSS
13:58 Как инлайнить SVG
16:37 Графика на сайте
20:29 Доступность руками
22:37 Аудит доступности
Нравится? Становитесь патронами — https://www.patreon.com/pepelsbey
SVGO…
#web
10 консольных трюков для профессиональной отладки
https://itnext.io/10-console-tricks-to-debug-like-a-pro-66ee2225ec57
10 консольных трюков для профессиональной отладки
https://itnext.io/10-console-tricks-to-debug-like-a-pro-66ee2225ec57
#css
Фигуры, сгенерированные с помощью CSS background gradients.
https://codepen.io/yuanchuan/full/vVRKRQ/
Фигуры, сгенерированные с помощью CSS background gradients.
https://codepen.io/yuanchuan/full/vVRKRQ/
The Intl.RelativeTimeFormat API — обработка дат и времени относительно текущего момента
https://developers.google.com/web/updates/2018/10/intl-relativetimeformat
https://developers.google.com/web/updates/2018/10/intl-relativetimeformat
#web
Prettier, ESLint, Husky, Lint-Staged и EditorConfig: инструменты для написания аккуратного кода
https://habr.com/company/ruvds/blog/428173/
Prettier, ESLint, Husky, Lint-Staged и EditorConfig: инструменты для написания аккуратного кода
https://habr.com/company/ruvds/blog/428173/
#angular
Изучение Angular 6 для построения full-stack приложений
https://medium.freecodecamp.org/learn-angular-6-by-building-a-full-stack-application-186659f51a27
Изучение Angular 6 для построения full-stack приложений
https://medium.freecodecamp.org/learn-angular-6-by-building-a-full-stack-application-186659f51a27
freeCodeCamp.org
Learn Angular 6 by building a full-stack application
Angular 6 is out! The new features include better performance, new powerful CLI
additions and a new way to inject services.
This tutorial is for beginners. You’ll learn Angular by example by building a
full-stack CRUD — Create, Read, Update and Delete —…
additions and a new way to inject services.
This tutorial is for beginners. You’ll learn Angular by example by building a
full-stack CRUD — Create, Read, Update and Delete —…