Menu
Is it bad to use inline JavaScript event handlers, or is that fine?
On the page I plan to use it on, I'm only going to use an event handler once, so is it acceptable to use an inline event handler in this case, or shall I write the code for the event handler within <script> tags?
927
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.
Inline event handlers — don't use these You can find HTML attribute equivalents for many of the event handler properties; however, you shouldn't use these — they are considered bad practice.
Note: Using Inline JavaScript is a bad practice and it is not recommended. It can be used for demonstration purposes so that the demonstrator doesn't have to deal with 2 separate files at a time. It is recommended to write JavaScript code in a separate .
An event handler is a JavaScript function that runs when an event fires. An event listener attaches responsiveness to a given element, which allows the element to wait or “listen” for the given event to fire. Events can be assigned to elements via inline event handlers, event handler properties & event listeners.
You should try to avoid the use of inline styles because it is considered a bad practice, not by me or any other web developer but by In my opinion, it’s quite bad. If you are just using it to practice CSS or to test something, then it’s ok.
Therefore, to ensure easy readability of HTML tags, it's advisable to use the javascript environment for any event handling. Also, if more than one function or expression would be applied to an event, use addEventListeners, else, inline events. Learn more about addEventListeners and the benefits they provide in this article - addEventListener ()
Code 1 is an example of an inline event. Here the event is specified with a function as an attribute to the HTML tag and the function used is specified in the javascript area (which could be in the script tag or an external javascript file). Here, once the button is clicked, the btnClick () function is invoked.
For example, by id, you could add as many events as possible such as: Another advantage of this inline javascript method over the inline HTML event is that inline HTML requires the event to be global. The scope of the function cannot be controlled there unlike the inline javascript where scope (or even closures) can be controlled.
Its bad practice if your concern is readability in your mark-up and maintenance, especially on a larger scale it can get quite messy - also keep in mind the inline JS will never be cached like an external js file would so you do suffer a bit in regards to performance especially if you abuse it
Read this article for more insight: http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
