пересмотр
Ненавязчивый подход JavaScript был хорош в прошлом - особенно привязка обработчика событий в HTML считалась плохой практикой (в основном потому, onclick events run in the global scope and may cause unexpected error
что то, что было упомянуто YiddishNinja )
Тем не мение...
В настоящее время кажется, что этот подход немного устарел и нуждается в некотором обновлении. Если кто-то хочет быть профессиональным разработчиком внешнего интерфейса и писать большие и сложные приложения, ему необходимо использовать такие фреймворки, как Angular, Vue.js и т. Д. Однако эти фреймворки обычно используют (или позволяют использовать) HTML-шаблоны, к которым привязаны обработчики событий. непосредственно в коде html-шаблона, и это очень удобно, понятно и эффективно - например, в шаблоне angular обычно пишут:
<button (click)="someAction()">Click Me</button>
В raw js / html эквивалент этого будет
<button onclick="someAction()">Click Me</button>
Разница в том, что в raw js onclick
событии запускается в глобальной области, но фреймворки обеспечивают инкапсуляцию.
Так в чем же проблема?
Проблема в том, что начинающий программист, который всегда слышал, что html-onclick - это плохо и который всегда использует, btn.addEventListener("onclick", ... )
хочет использовать какой-то фреймворк с шаблонами ( addEventListener
также есть недостатки - если мы обновляем DOM динамически с использованием innerHTML=
(что довольно быстро ) - тогда мы теряем события обработчики связываются таким образом). Тогда он столкнется с чем-то вроде дурных привычек или неправильного подхода к использованию фреймворка - и он будет использовать фреймворк очень плохо - потому что он сосредоточится в основном на js-части, а не на части-шаблоне (и будет производить нечеткие и трудные для поддержки код). Чтобы изменить эту привычку, он потеряет много времени (и, вероятно, ему понадобится удача и учитель).
Так что, на мой взгляд, исходя из опыта моих студентов, для них было бы лучше, если бы они использовали html-handlers-bind вначале. Как я уже сказал, обработчики вызываются в глобальном масштабе, но на этом этапе студенты обычно создают небольшие приложения, которыми легко управлять. Для написания приложений большего размера они выбирают несколько фреймворков.
Так что делать?
Мы можем ОБНОВИТЬ подход ненавязчивого JavaScript и разрешить привязку обработчиков событий (в конечном итоге с простыми параметрами) в html (но только обработчик привязки - не помещать логику в onclick, как в OP quesiton). Так что, на мой взгляд, в raw js / html это должно быть разрешено
<button onclick="someAction(3)">Click Me</button>
или
function popup(num,str,event) {
let re=new RegExp(str);
// ...
event.preventDefault();
console.log("link was clicked");
}
<a href="https://example.com" onclick="popup(300,'map',event)">link</a>
Но приведенные ниже примеры НЕ должны допускаться
<button onclick="console.log('xx'); someAction(); return true">Click Me</button>
<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>
Реальность меняется, наша точка зрения тоже должна