onclick прямо в HTML или addEventListener — как правильно вешать клик?
Видел два способа повесить клик: <button onclick="go()"> прямо в HTML и addEventListener в JS-файле. Оба работают. Какой правильнее и в чём разница для новичка?
2 ответа
Оба рабочие, но у них разные плюсы:
1. onclick в HTML — просто, видно сразу:
<button onclick="go()">Жми</button>
function go() { alert('клик'); }
Минус: смешивает разметку и логику, и можно повесить только один обработчик.
2. addEventListener — современный и гибкий:
document.getElementById('btn').addEventListener('click', function() {
alert('клик');
});
Плюсы: разметка остаётся чистой, можно навесить несколько обработчиков на одно событие, легко потом снять через removeEventListener.
Для учёбы подойдёт любой, но привыкай к addEventListener — так делают в реальных проектах.
Есть ещё третий промежуточный способ — свойство .onclick в JS:
btn.onclick = function() { ... };
Он как addEventListener, но тоже допускает только один обработчик (новое присваивание затирает старое). addEventListener этого недостатка лишён, поэтому он предпочтительнее.