Funny you should ask... Just revisited this a few days ago :)
https://www.google.com/search?q=submit+onclick+mplungjan+BrendanEich
@chris - the whole post is interesting and the only new thing since then it s the form attribute on a submit button. I’d still always use the submit event and never a submit button’s click event. I have yet to be in a situation where the click event of a submit button was interesting. Different of curse from a click event on type=button
Bottom line is that they're 2 different, but often related things and can be used for 2 different purposes. If you have a form with some data and you just want to send that to the server, then the form submit is probably easier. If you have a button that you want to trigger an action, then use a click handler. It wouldn't make any sense to have a form with a submit button to hide a div on the screen - you'd just have a button with a click handler.
You can of course use a click handler on a button to submit a form, and you'd often do this if you need to do something other than just send the form (manipulate the data in some way). You can of course submit data to your server without a form by building a data objet and sending that.
It's not really about pros and cons, as you'll often use both. Which you use will just depend on what you want to happen when you click that button.