Почему использование onClick() в HTML – плохая практика?

Быстрый ответ

Использование onClick() непосредственно в HTML приводит к смешиванию структуры и поведения элементов, что созидает неразбериху в коде. Предпочтительнее использовать addEventListener для более структурированного и модульного подхода:

// Вместо применения <button onClick="handleClick()"> пишем:

document.querySelector('#myButton').addEventListener('click', function() {
  alert('Нажата кнопка! Никаких призов не будет! 🖱️');
});

// HTML: <button id="myButton">Нажимай сюда</button>

Главные преимущества addEventListener: улучшение читаемости кода, облегчение поддержки и соответствие современным лучшим практикам.

Встраиваемый onClick: почему он менее желателен на практике

Чистота кода облегчает понимание

Соблюдение принципа раздельного подхода к HTML, CSS и JavaScript — это ключевое правило разделения обязанностей. Такой подход способствует доступности и облегчает поддержку кода. Встраиваемый onClick() стирает эти границы, что ведет к перемешиванию кода, когда логика и структура страницы становятся неразделимыми.

Подробнее об этом расскажет наш спикер на видео

Непроблемная кроссбраузерность

Использование фреймворков вроде jQuery, Vue.js или Angular обеспечивает стабильную обработку событий в различных браузерах, избавляя от вопросов совместимости. Встраиваемые обработчики onClick() не имеют подобных преимуществ и могут привести к непредсказуемому поведению.

Централизованная обработка событий

Создание единого контроллера событий в JavaScript позволяет эффективно управлять ими. В то время как onClick() распределяет скрипты по всему HTML, осложняя глобальные изменения и адаптацию к различным условиям.

Семантика и доступность

Сосредоточение на семантическом HTML усиливает доступность, используя HTML-теги строго по их назначению, а не привязывая к ним действия. Атрибуты onClick() могут серьёзно затруднить достижение этой цели.

Делегирование событий – ваш верный союзник

Делегирование событий позволяет привязать один обработчик событий к родительскому элементу, а не к каждому дочернему элементу. Это способ сэкономить ресурсы. onClick() не предлагает такой оптимизации производительности.

Грациозное понижение функционала

Элегантное ухудшение предполагает, что сайт продолжает работать, даже если JavaScript отключен или не функционирует. onClick() может ограничивать функциональность, препятствуя этому принципу.

Легкость интеграции плагинов и переиспользование кода

Централизация обработки событий в JavaScript позволяет переиспользовать скрипты и создавать модули. В отличие от него, onClick() привязан к конкретному элементу и делает код менее гибким.

Управление всплывающими окнами

Для управления всплывающими окнами не следует использовать onClick="window.open()". Лучше применить функцию window.popup() в обработчике событий JavaScript.

Скрытие переменных при помощи инкапсуляции

Применение немедленно вызываемых функций (IIFE) позволяет скрыть переменные и функции, защищая их от попадания в глобальную область видимости, в отличие от onClick(), который может случайно их раскрыть.

От простоты к сложности

Начните с базового оформления, постепенно дополняя его при помощи ненавязчивого JavaScript, гарантированно обеспечивающего базовую работоспособность, пока дополнительные скрипты вносят интерактивность в проект.

Визуализация

Если представить ваш сайт как галерею современного искусства (🖼️):

• Каждая картина символизирует элемент интерфейса (🎨)
• Каждый посетитель (🧑‍🎨) обозначает событие.

Когда применяется onClick():

• Посетители влияют на картину (UI) непосредственно, активируя механизмы для отображения сообщения (🎨🤚➡️💬). – Не гибко: возможность выполнить только те действия, которые заранее предполагалась для элемента. – Срозает беспорядок: многообразие рук, касающихся произведений искусства, превращается в хаос!

При использовании обработчиков событий в JavaScript:

• Посетители задействуют механизм, оповещая экскурсоводу раскрыть информацию (🎨🔊➡️👥). – Гибкость: гид может работать с любой информацией, в зависимости от ситуации. – Чистота: произведения искусства остаются нетронутыми, сохраняется их первозданный вид!

Четкое разделение между поведением и структурой обеспечивает легкость обслуживания кода и улучшает его гибкость.

Быстрый путь к структурированному и доступному коду

Единое использование с addEventListener

Применяйте addEventListener для обработки событий, что позволяет привязать несколько функций к одному событию без конфликтов и способствует инкапсуляции кода.

// Вместо `onclick` используем так:
elem.addEventListener('click', function() {
  console.log("Мы обнаружили товарища в методах! 😄");
});

Чистота области видимости с помощью модулей

Обработчики событий следует инкапсулировать в модули или IIFE для предотвращения засорения глобальной области видимости. Это способствует читаемости и облегчает поддержку кода.

Следование современным стандартам

Использование современных JavaScript-фреймворков, таких как React, Vue, Angular, помогает осуществлять надежную обработку событий и облегчает модулирование и поддержку кода в больших проектах.

Полезные материалы

1. Общее знакомство с browser events — глубоко проникающий обзор по обработке событий в JavaScript.
2. Делегирование событий — объяснение концепции делегирования событий в JavaScript для более совершенной обработки.
3. Всплытие и перехват событий в JavaScript. Объяснение механизма — детальный обзор всплытия и перехвата событий для укрепления понимания этого процесса.
4. Medium — анализ вопросов управления и читаемости кода при встраивании JavaScript.
5. Keeping JavaScript Dependencies At Bay ◆ 24 ways — лучшие практики для разделения HTML и JavaScript с целью улучшения управления проектом.