How to properly integrate JS and HTML?

Question

JavaScript

As it is more correct, it is "beautiful" to write JS code. Using jQuery as an example.
So:
<button id="click">Кнопка</button>

$('document').ready(function(){
$('#click').click(function(){
console.log(123);
})
})

+
HTML is not overloaded with code
-
It is difficult to find dependencies in a large project
Or like this:
<button onclick="click()">Кнопка</button>

function click(){
console.log(123);
}

+
it is immediately clear who is launching what
-
overloaded HTML

Answer 1

in fact, depending on how you write, here, apparently, you have the most primitive layout option, for it inline events (onclick="click()") are used only as a last resort, since they are not obvious in the code.
and yet you do not apply an alert, this is a blocking operation.

Answer 2

I won't say which is correct, but I usually use the first method.

Answer 3

But in the second option - there will be no "doubling / x4 / x8 / ..." listeners and "why the code does not work when I use Ajax".

Answer 4

Definitely the first option.
The second can only be used for quick tests on the knee, when you need to quickly check something and throw it away.