Вызов JavaScript кода по клику на ссылку: события, DOM

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

Чтобы вызвать функцию JavaScript при клике по ссылке, используйте тег <a> с атрибутами href="#" (отменяет стандартное действие перехода) и onclick (инициирует нужную функцию). Внутри функции вызывайте event.preventDefault() для предотвращения перезагрузки страницы.

<a href="#" onclick="doSomethingCool(event);">Кликни здесь!</a>

<script>
function doSomethingCool(event) {
  event.preventDefault(); // Предотвращаем перезагрузку страницы
  alert('Привет от JavaScript!');
}
</script>

При клике на ссылку сработает функция doSomethingCool, а event.preventDefault() позволит сохранить текущее состояние страницы.

Развиваем интерактивность кнопок

Если нужно выполнить действие без перехода по ссылке, то предпочтительнее использовать кнопки вместо ссылок. Это улучшит удобство использования и будет больше соответствовать семантике HTML.

<button onclick="onlyCoolButtonsAllowed();">Действие</button>

<script>
function onlyCoolButtonsAllowed() {
  // Здесь ваш JavaScript код
}
</script>

Используйте кнопки для интерактивных действий, оставив ссылки для навигации.

Изящный подход: ненавязчивый JavaScript

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

window.onload = function() {
  document.getElementById('myLinkId').addEventListener('click', function(event) {
    event.preventDefault();
    // Функционал обработки клика
  });
};

Слушатели событий активируются только после загрузки страницы, без window.onload они не будут работать.

Танец с динамическими элементами

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

document.body.addEventListener('click', function(event) {
  if (event.target.matches('.dynamicEtchASketch')) {
    event.preventDefault();
    // Действие при клике на соответствующие элементы
  }
});

Делегирование событий упрощает управление событиями и повышает эффективность кода.

Безопасный JavaScript: держим честь стражи

Встраивание JavaScript в ссылки должно соответствовать Политике безопасности содержимого (CSP). Использование внешних файлов JavaScript является безопасной альтернативой встроенным обработчикам.

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

Как ссылка запускает функцию JavaScript:

• 🖱 кликаете.
• От курицы (клика) до утки (функции): Событие преобразуется в вызов функции.
• 🐥💨: Функция выполняется, как будто бы волшебным образом появилась утка.

Сепарация кода: нейтралитет Швейцарии

Разделение кода улучшает его читаемость и масштабируемость. Поведение JavaScript не должно встраиваться в HTML теги:

document.addEventListener('DOMContentLoaded', (event) => {
  document.getElementById('linkId').addEventListener('click', (e) => {
    e.preventDefault();
    // Функционал обработчика
  });
});

Не нужно заменять обычный JavaScript на jQuery, если можно достичь желаемого результата без его использования. jQuery предлагает метод .on() для быстрого назначения обработчиков событий.

Манипуляции с DOM: момент марионеточника JavaScript

С помощью связывания ссылок с JavaScript, манипулирование DOM становится важной частью интерактивного взаимодействия с пользователем:

function newNarrative() {
  document.getElementById('story').innerHTML = 'И они жили долго и счастливо...';
}

Ошибки и напористость: Принцесса и Чудовище

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

if (window.addEventListener) {
  window.addEventListener('error', function(e) {
    // Обработка ошибок
  });
} else {
  window.attachEvent('onerror', function(e) {
    // Поддержка старых браузеров
  });
}

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

1. Введение в события – учебник по веб-разработке от MDN — Гид по событиям JavaScript.
2. Как переключить видимость элемента — Практический гайд по скрытию и показу элементов.
3. Введение в браузерные события — Все о управлении событиями в JavaScript.
4. addEventListener vs onclick – Stack Overflow — Обсуждение достоинств разных подходов к привязке событий.
5. Опасности остановки распространения событий | CSS-Tricks — О преимуществах и недостатках контроля над распространением событий.
6. Использование Fetch API — Подробности о Fetch API для сетевых запросов.
7. .on() | Документация jQuery API — Описание метода .on() для назначения обработчиков событий в jQuery.