Revisión
El enfoque discreto de JavaScript fue bueno en el PASADO, especialmente el enlace de controlador de eventos en HTML se consideró una mala práctica (principalmente porque onclick events run in the global scope and may cause unexpected error
lo mencionado por YiddishNinja )
Sin embargo...
Actualmente parece que este enfoque está un poco desactualizado y necesita alguna actualización. Si alguien quiere ser un desarrollador frontend profesional y escribir aplicaciones grandes y complicadas, entonces necesita usar marcos como Angular, Vue.js, etc. Sin embargo, esos marcos generalmente usan (o permiten usar) plantillas HTML donde los controladores de eventos están vinculados en el código html-template directamente y esto es muy útil, claro y efectivo, por ejemplo, en la plantilla angular la gente suele escribir:
<button (click)="someAction()">Click Me</button>
En raw js / html el equivalente de esto será
<button onclick="someAction()">Click Me</button>
La diferencia es que en el onclick
evento js sin procesar se ejecuta en el ámbito global, pero los marcos proporcionan la encapsulación.
¿Entonces, dónde está el problema?
El problema es cuando un programador novato que siempre escuchó que html-onclick es malo y que siempre usa btn.addEventListener("onclick", ... )
quiere usar un marco con plantillas ( addEventListener
también tiene inconvenientes , si actualizamos DOM usando dinámicamente innerHTML=
(lo cual es bastante rápido ), entonces perdemos eventos los manejadores se unen de esa manera). Luego se enfrentará a algo como malos hábitos o enfoque incorrecto para el uso del marco, y usará el marco de una manera muy mala, porque se centrará principalmente en la parte js y no en la parte de la plantilla (y producirá poco claro y difícil de mantener código). Para cambiar estos hábitos, perderá mucho tiempo (y probablemente necesitará algo de suerte y un maestro).
En mi opinión, según la experiencia con mis alumnos, sería mejor para ellos si utilizan html-handlers-bind al principio. Como digo, es cierto que los controladores son de alcance global, pero en esta etapa los estudiantes generalmente crean pequeñas aplicaciones que son fáciles de controlar. Para escribir aplicaciones más grandes, eligen algunos marcos.
¿Entonces lo que hay que hacer?
Podemos ACTUALIZAR el enfoque de JavaScript discreto y permitir controladores de eventos de enlace (eventualmente con parámetros simples) en html (pero solo controlador de enlace, no poner lógica en onclick como en la pregunta OP). Entonces, en mi opinión en js / html sin procesar, esto debería permitirse
<button onclick="someAction(3)">Click Me</button>
o
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>
Pero los ejemplos a continuación NO deberían permitirse
<button onclick="console.log('xx'); someAction(); return true">Click Me</button>
<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>
La realidad cambia, nuestro punto de vista también debería