Чем отличаются события click по кнопке с атрибутом submit и событие submit на самой форме (мой проблемный код внутри)?

Question

[VladMokrousov]

Привет, столкнулся с интересным поведением js. Мне нужно отправить комментарий на сервер после его валидации.

Когда js слушает событие click на кнопке с атрибутом submit, все проходит отлично (не смотрите на ответ сервера, главное, что выполняется и кусок кода с валидацией, и кусок кода с отправкой на сервер). Но когда вешаю обработчик события submit на саму форму, все начинает работать через одно место. В рабочем проекте проверок больше, и все выглядит хуже, чем в примере, но для демонстрации сойдет. https://codepen.io/VladMokrousov/pen/ZEQEGzg

То есть при использовании события submit код в функции с валидацией выполняется частично. Я не понимаю причину такого поведения. Порыскав в гугле, нашел только туманные мысли о том, что click выполняется быстрее submit и, если при submit валидация не проходит, все сразу летит к чертям.

Буду благодарен за разъяснение такого поведения.
P.S evt.preventDefault() пробовал в разных местах

Comments

[Mazino]

Ответ на вопрос в самом вопросе. Событие click в данном контексте именно что вызывает у формы событие submit, его так же можно и без посредников вызвать напрямую у формы. Если вы само событие submit перехватили, то это не значит, что это только вы его слушали и что-то делаете. Есть поведение по умолчанию, которое проявляется в ответ на большинство событий. preventDefault позволяет вашему обработчику получить монопольный контроль над событием и вместе с тем обременяет всей "магической" работой, которая совершалась по умолчанию, в вашем случае сериализация формы и сборка запроса. По этой причине, если вы хотите выполнить валидацию, перед отправкой, то лучше слушать click кнопки submit с preventDefault и в случае успешного ее прохождения вызывать у формы submit самостоятельно.
На всякий случай ответ на вопрос: click происходит не быстрее submit, а перед ним

[VladMokrousov]

Mazino, Да, я имел в виду перед, а не быстрее submit) Вы написали про магическую работу, вот про нее я хочу узнать подробнее. Возможно вопрос сформулировал некорректно. Мне интересно, почему, когда я отменяю действие по умолчанию через preventDefault у события submit формы результат отличается от отмены действия по умолчанию у события click на кнопке с атрибутом submit. На мой взгляд поведение должно быть одинаковым.

Answer 1

[Арсений Матыцин]

Click — универсальное событие, применимое ко всем элементам.
Submit — событие принятия формы.

И углубляться стоит начать, возможно, отсюда.

PS: и за перехват событий тоже, впрочем, если ты вешаешь preventDevault на клике кнопки, которая отправляет форму, то блокируешь цепочку событий, в том числе отправку формы, или переход по ссылке (если к ссылке применяешь).

Comments

[VladMokrousov]

Арсений, статью прочитал, но не понял в полной мере)
По поводу применения preventDevault к кнопке понял. Можете сказать, как это происходит с формой?

[WapSter]

VladMokrousov, точно так же.

[VladMokrousov]

WapSter, Я понимаю, что прописывая preventDevault отменяю действия по умолчанию) Мне интересно другое - почему, когда я отменяю действие по умолчанию через preventDefault у события submit формы результат отличается от отмены действия по умолчанию у события click на кнопке с атрибутом submit. На мой взгляд поведение должно быть одинаковым.