Как сделать выполнение кода по нажатию на кнопку на JS?

Как выполнить код по нажатию на кнопку

Это базовое умение в JavaScript. Существует несколько способов обработки клика на кнопку, от простых до сложных. Рассмотрим их все.

1. onclick атрибут в HTML (не рекомендуется)

Самый простой способ, но считается плохой практикой в современной разработке.

// HTML
<button onclick="alert(Привет!)">
  Нажми меня
</button>

// Или передача функции
<button onclick="myFunction()">
  Нажми меня
</button>

<script>
  function myFunction() {
    console.log(Кнопка нажата!);
  }
</script>

Недостатки: смешивание HTML и JavaScript, сложнее отладка, проблемы с очисткой памяти.

2. addEventListener (современный способ)

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

// Получаем ссылку на кнопку
const button = document.querySelector(button);

// Добавляем обработчик события
button.addEventListener(click, function() {
  console.log(Кнопка нажата!);
  alert(Hello!);
});

// Или с стрелочной функцией (более современный синтаксис)
button.addEventListener(click, () => {
  console.log(Кнопка нажата!);
  document.body.style.backgroundColor = lightblue;
});

3. Именованная функция с addEventListener

Если нужно позже удалить обработчик, лучше использовать именованную функцию.

const button = document.querySelector(button);

function handleClick() {
  console.log(Кнопка нажата!);
}

// Добавляем обработчик
button.addEventListener(click, handleClick);

// Позже можно удалить обработчик
button.removeEventListener(click, handleClick);

4. Использование .onclick свойства (не рекомендуется)

Это способ может привести к перезаписи обработчиков.

const button = document.querySelector(button);

button.onclick = function() {
  console.log(Кнопка нажата!);
};

Проблема: если добавить еще один обработчик, первый перезапишется.

5. В React (функциональном компоненте)

Это наиболее популярный способ в современной разработке.

import React from react;

function MyButton() {
  const handleClick = () => {
    console.log(Кнопка нажата!);
    alert(Hello!);
  };

  return (
    <button onClick={handleClick}>
      Нажми меня
    </button>
  );
}

export default MyButton;

Или прямо в JSX:

<button onClick={() => console.log(Нажата!)}>
  Нажми меня
</button>

6. Обработка события с параметрами

Часто нужно передать данные в функцию при клике.

const button = document.querySelector(button);
const userId = 123;

button.addEventListener(click, () => {
  deleteUser(userId);  // Передаем параметр
});

function deleteUser(id) {
  console.log(`Удаляем пользователя с ID: ${id}`);
  fetch(`/api/users/${id}`, { method: DELETE });
}

В React это проще:

function UsersList({ users }) {
  const handleDelete = (userId) => {
    fetch(`/api/users/${userId}`, { method: DELETE });
  };

  return (
    <div>
      {users.map(user => (
        <button key={user.id} onClick={() => handleDelete(user.id)}>
          Удалить {user.name}
        </button>
      ))}
    </div>
  );
}

7. Обработка события с объектом события (event)

Обработчик события получает объект события с информацией о событии.

const button = document.querySelector(button);

button.addEventListener(click, (event) => {
  console.log(Объект события:, event);
  console.log(Элемент, на котором произошло событие:, event.target);
  console.log(Тип события:, event.type);
  
  // Отмена действия по умолчанию (если это form submit)
  event.preventDefault();
});

8. Делегирование событий

Интересный паттерн, когда обработчик добавляется на родительский элемент.

const container = document.querySelector(.button-container);

container.addEventListener(click, (event) => {
  if (event.target.tagName === BUTTON) {
    console.log(Нажата кнопка:, event.target.textContent);
  }
});

Это полезно, когда кнопок много или они динамически добавляются.

Лучшие практики

1. Используй addEventListener — это современный стандарт
2. Избегай onclick в HTML — разделяй разметку и логику
3. В React используй onClick prop — это идиоматичный способ
4. Удаляй обработчики, если они больше не нужны — это предотвращает утечки памяти
5. Используй стрелочные функции — они проще и понятнее
6. Обращайся с event объектом — он содержит полезную информацию

В современной разработке (React, Vue, Angular) обработка клика обычно встроена в компонент, поэтому ручная работа с DOM почти не нужна. Но понимание базовых механизмов события очень важно для собеседования и отладки проблем.