Is inline event handlers considered a bad practice?
<button onclick=someFunction()>Click me!</button>
If so, what are the disadvantages of using inline event handlers?
It's a bad idea because...
1) For a long time now there has been a sensible emphasis on a clear split between content, style and script. Muddying your HTML with JS is not consistent with this.
2) More importantly, you get much less control over your events. Specifically:
you can bind only one event of each kind with DOM-zero events (which is what the inline ones are), so you can't have two
click event handlers
if an event is specified inline, the JS is specified as a string (attribute values are always strings) and evaluated when the event fires. Evaluation is evil.
you are faced with having to reference named functions. This is not always ideal (event handlers normally take anonymous functions) and has implications on the function needing to be global
In short, handle events centrally via the dedicated
addEventListener API, or via jQuery or something.
Aside from semantics and other opinions expressed in the accepted answer, all inline scripts are considered a vulnerability and high security risk. Any website expecting to run on modern browsers are expected to set the 'Content-Security-Policy' (CSP) property, either via meta attribute or headers.
Doing so is incompatible with all inline script and styles unless explicitly allowing these as an exclusion. While CSP goals are mainly about preventing persistent cross-site script (xss) threats, for which inline scripts and styles are a vector of xss, it is not default behaviour currently in browsers but may change in future.
Building on @Mitya answer.
In most of the modern JS libraries React, Vue,..etc. inline event handlers are considered idiomatic, but most of the limitation mentioned by @Mitya are gone. As case study we will have look over Vuejs and compare it with point listed above:
onclickare not plain string but js expressions look here
In my own opinion, inline event handler enhance readability majorly, but opinions may vary.
©2020 All rights reserved.