Вызов 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) {
// Поддержка старых браузеров
});
}
Полезные материалы
- Введение в события – учебник по веб-разработке от MDN — Гид по событиям JavaScript.
- Как переключить видимость элемента — Практический гайд по скрытию и показу элементов.
- Введение в браузерные события — Все о управлении событиями в JavaScript.
- addEventListener vs onclick – Stack Overflow — Обсуждение достоинств разных подходов к привязке событий.
- Опасности остановки распространения событий | CSS-Tricks — О преимуществах и недостатках контроля над распространением событий.
- Использование Fetch API — Подробности о Fetch API для сетевых запросов.
- .on() | Документация jQuery API — Описание метода .on() для назначения обработчиков событий в jQuery.