События нажатия кнопок — распространенный шаблон взаимодействия в веб-разработке. Они позволяют пользователям выполнять действия, нажимая на кнопки, например отправлять формы, переходить на разные страницы или запускать определенные функции. В этой статье мы рассмотрим несколько методов вызова URL-адреса при нажатии кнопки, сопровождаемые примерами кода. Давайте погрузимся!

Метод 1. Использование тега привязки
Один из самых простых способов инициировать вызов URL-адреса — использование тега привязки (<a>). Если установить атрибут hrefтега привязки на нужный URL-адрес, нажатие на него перенаправит пользователя на этот URL-адрес.

<a href="https://example.com">Click me!</a>

Метод 2: использование объекта window.location
JavaScript предоставляет объект window.location, который представляет URL-адрес текущей страницы. Назначив новый URL свойству window.location.href, мы можем перенаправить пользователя на нужный URL.

<button onclick="window.location.href = 'https://example.com';">Click me!</button>

Метод 3: использование метода location.assign()
Подобно предыдущему методу, мы можем использовать метод location.assign()для перенаправления пользователя на новый URL-адрес при нажатии кнопки.

<button onclick="location.assign('https://example.com');">Click me!</button>

Метод 4. Использование функции fetch().
Если вы хотите выполнить HTTP-запрос к URL-адресу, не переходя с текущей страницы, вы можете использовать функцию fetch()в сочетании с функцией событие нажатия кнопки.

<button onclick="fetch('https://example.com').then(response => response.text()).then(data => console.log(data));">Click me!</button>

Метод 5: использование объекта XMLHttpRequest
Для старых браузеров, которые не поддерживают функцию fetch(), вы можете использовать объект XMLHttpRequest для выполнения асинхронного запроса к URL-адресу и обработки ответа.

<button onclick="var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://example.com', true); xhr.send();">Click me!</button>