Форма onSubmit vs onClick
<form>
<input />
<button
onClick = {e => {
e.preventDefault();
alert("clicked");
}}
>
click
</button>
</form>
Если я перенесу обработчик onClick в form в onSubmit, я получу точно такое же поведение.
Большинство ответов, которые я искал в Google, предполагали, что разница в том, что onClick не будет реагировать на отправку формы с помощью нажатия клавиши return, но это не так, как показано в примере codeandbox.
Когда они будут вести себя по-другому, кроме манипуляций с DOM / моделирования событий?
Если есть несколько кнопок или входов, onsubmit отправляет всю форму по умолчанию, а onclick может, но используется для более динамичных вещей, таких как слайды и тому подобное, но на самом деле это функция, которую вы пишете.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
По сути, это зависит от браузера. Некоторые браузеры могут вызывать onClick кнопки отправки при отправке формы нажатием клавиши возврата, но стандарт не требует этого. Другие могут вызывать onClick только при нажатии возврата если выбрана кнопка отправки. Другие могут не запустить его, если кнопка не нажата вручную.
Если вам нужна лучшая переносимость, используйте onSubmit для того, для чего он предназначен: для обнаружения отправки формы.
Другое главное отличие - цель мероприятия.
Note that the submit event fires on the <form> element itself, and not on any <button> or <input type = "submit"> inside it. (Forms are submitted, not buttons.)
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event
потому что технически это отдельные события. Событие щелчка фиксирует событие щелчка мыши. Однако есть много способов отправить форму без щелчка. Из другого триггера JavaScript, с помощью возврата с клавиатуры и т. д., Поэтому они разные.