❓💭 Объясните делегирование событий в JavaScript

Делегирование событий — прием, который состоит в добавлении обработчиков событий к родительскому элементу, а не к дочерним. Обработчик будет срабатывать всякий раз, когда событие будет запущено на дочерних элементах благодаря всплытию событий в DOM. Преимущества этой техники очевидны:

➕Экономит объем используемой памяти, ведь для родительского элемента требуется только один обработчик.
➕Не требуется привязывать или убирать обработчики при добавлении и удалении элементов.

📌 А теперь пример

1️⃣ Самый простой пример: у вас есть HTML-страница, на которой расположена таблица с несколькими ячейками; ваша задача — реализовать подсветку ячейки при клике.

Вместо того, чтобы назначать обработчик onclick для каждой ячейки — можно повесить один обработчик на элемент. Он будет использовать event.target, чтобы получить элемент, на котором произошло событие, и подсветить его. В данном случае нет никакой разницы, сколько ячеек в таблице.

2️⃣ У делегирования есть и другое применение — действия в разметке. Например, вам требуется сделать меню с разными кнопками, а также у вас есть объект с соответствующими методами. Как их состыковать?

Вы можете добавить один обработчик для всего меню и атрибуты data-action для каждой кнопки в соответствии с методами, которые они вызывают.

3️⃣ Делегирование событий можно использовать для добавления элементам «поведения», декларативно задавая обработчики установкой специальных HTML-атрибутов и классов.

Приём проектирования «поведение» состоит из двух частей:
▫️Элементу ставится пользовательский атрибут, описывающий его поведение.
▫️При помощи делегирования ставится обработчик на документ, который ловит все клики (или другие события) и, если элемент имеет нужный атрибут, производит соответствующее действие.

#вопросы_с_собесов #easy

🔍Все самое полезное для айтишников в одном канале: анализ рынка труда, советы по Git, подкасты про разработку, новости и просто мемы.

Подписываемся на «Библиотеку программиста» (если еще не) — источник действительно качественного технического контента.

👉Подписаться👈

🕹 Rx Playground — интерактивная площадка, которая позволяет наглядно изучить основные концепции и операции реактивного программирования с использованием возможностей RxJS и three.js.

В каждом уроке вы можете менять операторов на досках. Наблюдайте за реакцией системы и попытайтесь понять основные причины ее поведения. По мере прохождения серии заданий вы познакомитесь с увлекательными правилами реактивного программирования.

Думайте об этой демонстрационной игровой площадке как о своей собственной фабрике игрушек, где вы можете дать волю своему творчеству. И да, это очень красиво!

Одной из самых интересных грядущих новинок JavaScript и TypeScript является явное управление ресурсами. Новый синтаксис using foobar = … реализует идиому RAII, позволяя писать намного менее многословный код, управляющий какими-либо ресурсами.

Автор статьи на примерах разбирает эту фичу — в том виде, в котором она сейчас доступна в TypeScript 5.2.0-beta с полифиллом disposablestack. Кроме того:

🔸Рассматривает синхронные и асинхронные ресурсы, DisposableStack/AsyncDisposableStack
🔸Приводит пример неочевидного бага и несколько других нововведений Node.js, про которые, возможно, ещё знают не все.

Читать

💭 В комментариях новички часто спрашивают про ресурсы/книги для начинающего фронтенд-разработчика.

Давайте саккумулируем в комментариях свой опыт и поделимся источниками, с которых эффективнее всего начать изучение! И вообще, с какого стека лучше начинать? Поделитесь опытом👇

#холивар

Наглядно о том, как взаимодействуют фронтенд- и бэкенд-разработчики

#юмор #жиза

The Concise TypeScript Book

Перед вами книга, которая содержит исчерпывающий и краткий обзор возможностей TypeScript.

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

Являетесь ли вы новичком или опытным разработчиком, эта книга станет бесценным ресурсом для улучшения вашего понимания и повышения квалификации в TypeScript.

🔗 Онлайн версия

Hono + htmx + Cloudflare — новый стек?! Но это не точно

Кажется, что в последнее время многие переходят на htmx как на альтернативу сложным библиотекам/фреймворкам вроде React, но что, если вы хотите продолжать использовать JSX?

Hono — это веб-фреймворк, который как раз включает JSX middleware. Его автор Yusuke Wada приводит краткий пример того, как все это можно объединить с Cloudflare Workers и D1 для более простого использования JavaScript на стороне сервера/клиента.

Читать