> Можно ли повесить обработчик сабмита на кнопку и на форму одновременно (JavaScript)

Да, можно повесить обработчики сабмита и на кнопку, и на форму одновременно, но важно понимать порядок событий и их особенности.

При клике на кнопку типа submit внутри формы сначала срабатывает событие click на кнопке, а затем - событие submit на форме. Если навесить обработчик на кнопку (например, click), он выполнится до обработчика формы. Однако стандартное поведение формы - отправка данных произойдет только после завершения всех синхронных обработчиков.

Пример:

JAVASCRIPT
const form = document.querySelector('form');
const button = document.querySelector('button[type="submit"]');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  console.log('Форма отправлена');
});

button.addEventListener('click', (e) => {
  console.log('Кнопка нажата');
  // e.preventDefault() здесь не остановит submit формы
});

При клике на кнопку в консоли будет: сначала "Кнопка нажата", затем "Форма отправлена".

Важно: Если в обработчике кнопки вызвать e.preventDefault(), это остановит только событие click, но не submit. Чтобы отменить отправку формы, нужно вызывать preventDefault() именно в обработчике submit. Также можно использовать e.stopPropagation() для предотвращения всплытия, но это не повлияет на сабмит.

Таким образом, оба обработчика сосуществуют, но их логика должна быть согласована, чтобы избежать конфликтов.