JavaScript в теге <a>: разница и сравнение 4 методов

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

Инлайновые обработчики событий в JavaScript (например, onclick="...") просты и наглядны, однако могут влиять на читаемость кода. Пример:

<a href="#" onclick="console.log('Слава Кликзилле!'); return false;">Кликни меня</a>

Ненавязчивый JavaScript, при применении которого добавляются слушатели событий из внешних файлов, способствует структурированности кода и его легкой поддержке. Этот подход — ключ к созданию оптимального и стабильного кода:

<a href="#" id="clickable">Кликни меня</a>
<script>
document.getElementById('clickable').addEventListener('click', (e) => {
  console.log('Осмелился клацнуть!');
  e.preventDefault();
});
</script>

Отказ от использования href="javascript:..." считается обоснованным ввиду потенциальных рисков для безопасности и комфорта использования. Современный стандарт в веб-разработке — это именно ненавязчивый JavaScript.

Обеспечение исполнения функциональности с учетом механизмов отката

Разрабатывая код согласно принципам прогрессивного улучшения, обязательно учитывайте, как будет работать код при отключенном JavaScript или его отсутствии. Предположим, что у нас традиционный якорный тег <a>, содержащий атрибут href с URL-адресом, что является альтернативой для SEO и доступности:

<a href="fallback.html" onclick="doSomething(); return false;">Стучите прежде, чем войти!</a>

Альтернативный URL ("fallback.html") выполняет роль отказоустойчивого варианта, обеспечивая функционирование ссылки даже при неактивном JavaScript. В свою очередь, href="javascript:;" или href="#" могут вызвать непредсказуемое поведение в различных браузерах, что отрицательно отразится на пользовательском опыте.

Почему стоит отказаться от использования "javascript:;" и "#"

Если применять пустые JavaScript URI (например, "javascript:;"), возможны проблемы с отслеживанием истории браузера или прокруткой страницы вверх. Этот подход не предлагает контекста или альтернативы для использования без JavaScript, что представляет угрозу для доступности.

Использование href="#" означает использование якорной ссылки, но при отсутствии соответствующего JavaScript, блокирующего стандартное поведение, пользователи сталкиваются с неожиданным прыжком страницы вверх, что портит пользовательский опыт.

Преимущества слушателей событий для создания более чистого кода

Добавление слушателей событий при помощи внешнего скрипта облегчает процесс организации кода, его управление и обновление. Оно также безупречно очищает HTML-код от JavaScript, улучшая его читаемость и облегчая парсинг:

document.querySelector('a#clickable').addEventListener('click', function(e) {
  console.log('С характером кликнуто!');
  e.preventDefault();
  // Здесь можно реализовать более сложные сценарии.
});

Если у вас есть несколько ссылок со схожим поведением, подумайте о делегировании событий, чтобы сделать код еще проще и лаконичнее.

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

Параллельно вспомогательную аналогию: разные способы интеграции JavaScript в тег <a> можно представить как разные входы в сад великанов JavaScript:

🚪 Инлайновый Обработчик Событий

• onclick="script"🌱
• Открывает мгновенный доступ, однако HTML остается ничего не подозревающим о внешних переменах.

🚪 Тег <script> Внутри

• <a><script>...</script></a>🍂
• Это как посадить семя прямо внутри ссылки, что далеко не идеально.

🚪 Внешний .js Файл

• <a href="door.js">🌳
• Грандиозные ворота, через которые проходят все элементы JavaScript, собранные в одном месте. Мечта разработчика.

🚪 Обработчик Событий

• element.addEventListener🌿
• Неспешный тайный вход, который позволяет наслаждаться чудесами, не нарушая нераздельного царства сада и при этом – сохраняя HTML в идеале.

Выбирайте метод, исходя из потребностей вашего проекта, и создавайте грамотно структурированный и аккуратный кодовый сад.

Соблюдая кроссбраузерную согласованность, вы на пути к успеху

Будучи обеспокоенным кроссбраузерной совместимостью, вы должны гарантировать, что ваш JavaScript исполняется безошибочно в всех основных браузерах. Проблемы могут связаны с использованием JavaScript в href или зависеть от специфических, нестандартных особенностей браузера.

Лучшая практика — убрать JavaScript из атрибута href и полагаться на надежные обработчики событий.

Понимание метода 4: Использование "#"

Если вы используете href="#", важно сочетать его с JavaScript, который предотвратит стандартное действие якоря:

<a href="#" id="noJumpLink">Тут скоков не будет!</a>
<script>
document.getElementById('noJumpLink').addEventListener('click', function(e) {
  e.preventDefault();
  // Здесь должен быть ваш код на JavaScript
});
</script>

Такой подход сохраняет чистоту URL и избегает ненужного прокручивания страницы, благодаря чему обеспечивается непрерывный и комфортный пользовательский опыт.

Учитывайте особые сценарии использования

Не забывайте о контексте, в котором используется JavaScript в теге <a>. Каковы цели ссылки? Используется ли она для навигации по сайту или для активации интерактивного элемента? Подберите метод в зависимости от конкретных потребностей проекта, чтобы обеспечить надежность и ориентированность на пользователя ресурса.

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

1. Тег Anchor в HTML: HyperText Markup Language | MDN — подробно о применении тега <a> совместно с JavaScript.
2. Обзор обработки событий – Справочник событий | MDN — информационный материал об обработчиках событий в JavaScript.
3. Отделение поведения – A List Apart — объяснения ведущих методик разделения JavaScript и HTML.
4. Метод addEventListener у объекта EventTarget – Web API | MDN — углубленная информация о применении addEventListener для привязки событий к элементам.
5. Как встроить JavaScript в HTML | DigitalOcean — полное руководство с рекомендациями по встраиванию внешних JavaScript-файлов в HTML.
6. Справочник по заголовку Content-Security-Policy (CSP) — о том, насколько важно разбираться в Политике Безопасности Контента для защиты от инъекций JS.
7. Всплытие и захват – JavaScript.Info — разъяснение принципов всплытия и захвата в механизме распространения событий JavaScript.