Багато років тому, ймовірно, jQuery (?) започаткував тенденцію для JavaScript UI бібліотек та фреймворків створювати одну точку делегування подій для захоплення всіх їхніх подій.
Можливо, є кілька причин для цього архітектурного вибору, включаючи можливі переваги для економії пам'яті, коли обробники подій (Event Listener) прив'язуються до великої кількості повторюваних елементів.
Це все добре, коли фреймворк також надає власні синтетичні події додаткам, маскуючи факт, що події насправді делегуються, а не слухаються там, де ми очікуємо.
Фото від Suzi Kim на Unsplash
Проте це не була задумана поведінка DOM. Протягом багатьох років ця практика ускладнювала можливість просто інспектувати елемент у інструментах розробника для того, щоб побачити його обробники подій, адже звісно, вони більше не реєструвалися там. Це ускладнювало налагодження та аналіз коду, адже програмістам доводилося слідкувати за всім кодом програми та шукати логіку маршрутизації, щоб визначити найбільш ймовірний шлях, яким було б пройдено. Браузери, зрештою, оновились і почали показувати делеговані події, але досвід усе одно залишався не оптимальним, адже все ще потрібно було читати та інспектувати делегування подій самого фреймворка і фільтрувати всі інші події, щоб нарешті отримати те, що нам потрібно.
Інша неприємна проблема з делегуванням подій, що його здійснюють фреймворки, полягає в тому, що це унеможливлює правильне використання event.currentTarget, адже він завжди вказує на елемент, вибраний фреймворком, зазвичай на корінь додатка.
Потрібно було кілька хмарних суботніх ранків для налагодження, щоб зрозуміти, що нам насправді не потрібно продовжувати це робити, тому ми змінили це.
Сьогодні Rimmel.js припинив використовувати примусове делегування подій, залишивши вибір за розробниками. Тепер всі події реєструються на відповідних елементах. Хочеш використовувати делегування подій? Звісно, це можна зробити, просто роби це як зазвичай на будь-якому предкурантовому елементі, і event.currentTarget працюватиме відповідно до веб-стандартів. Ми також змогли значно скоротити зайвий код бібліотеки, роблячи це.
import { rml } from 'rimmel';
function clickHandler(e) {
console.log('Click event handled');
console.log('event target:', e.target);
console.log('event currentTarget:', e.currentTarget);
}
document.body.innerHTML = rml`
` ```
Щасливого кодування, на крок ближче до стандартів. Якщо ви ще не робили цього, перегляньте [Rimmel.js](https://github.com/reactivehtml/rimmel), контркультурну бібліотеку UI для JavaScript.
Перекладено з: [A kick to framework’s event delegation](https://medium.com/@fourtyeighthours/a-kick-to-frameworks-event-delegation-888c09300930)