CODEWITHSUNDEEP
javascriptdomevent-handling
user1945782
user1945782

Reputation:

JavaScript and DOM button event handling

I recently saw this comment:

Please, please don't put JavaScript inside HTML elements. It's sloppy, needless, and a PITA to work with.

In this post. What is (are you) incognito getting at? Does he (do you) mean that every event should be wired manually in a piece of JavaScript / JQuery code (JQuery struck as I tend to work primarily with JavaScript only, without the plugins)?

Does best practice dictate that function calls should be attached using a JavaScript routine, or is it more readable to provide the function call (not a string of incessant JavaScript) directly in the mark-up so that you know what is being called in direct relation to that DOM element, e.g.:

<button id="myButt" onclick="shake(myButt);" value="Shake it!" />

...or am I barking up the wrong tree?

Upvotes: 0

Views: 83

Answers (2)

Satpal
Satpal

Reputation: 133403

It helps in application of Separation of concerns design principle. Where responsibility of presentation lies with HTML and behavior lies with JavaScript. In short, It helps in decoupling programming logic from HTML.

Also a very useful points from Adding an Event Handler

With inline event handlers you get very poor separation of JavaScript code from HTML markup. Modern browsers provide additional programmatic ways of registering event handlers for page elements, allowing you to dynamically add one or more handlers during the webpage lifetime.

Upvotes: 0

Rob W.
Rob W.

Reputation: 270

For me, it would probably come down to the complexity of the page in question. If it is a smaller, straightforward HTML page, then I really see no harm in using inline functions to handle events. When the page starts getting larger with many more moving parts, there is a certain advantage to having all of the js being handled in a central location so that you can simply get a quick birds-eye view of what is going on, rather than having to parse down a large source code file to find out where functions are being used. Knockout js works along these lines and becomes very convenient to use when your page starts getting really complex.

Upvotes: 0

Related Questions