Unobtrusive Javascript

It is a good practice to code JavaScript in such a way that it works well on any browser. Unobtrusive JavaScript is one such approach of using JavaScript in webpages.

Why Unobtrusive JavaScript?

Every browser is different with it’s own Document Object Model (DOM), built-in validations, etc. Inline Event-Handlers such as mouseup, click, etc may not be compatible on all browsers due to the way it was used in JavaScript and also due to browser compatibility problems. Hence, some functions must be written for event-handling. There is always a possibility for these function names to match with those of the inline event-handler libraries, thereby causing conflicts during execution. It is also difficult to understand and maintain them as it’s combined of both structure and behavior code. The result of all these issues is blocking of few contents in the web-pages that use JavaScript, code complexity, difficulty to read and understand and run-time errors.

Unobtrusive JavaScript

• Separate event-handling and JavaScript codes from HTML.

• Now-a-days standardized markups and styles are well used to maintain Web Standards, leading to cross-browser compatibility.

• Page contents are also visible irrespective of a situation where any part of JavaScript code doesn’t work.

• The problem of the inline event-handlers is handled in AngularJS by using ng-eventhandler directive [eg: ng-click,etc. ] which behaves the same for all browsers. The expression specified by the user can access only functions, thus avoiding the global namespace problems.

• In AngularJS, controllers handles responsibilities and HTML handles presentation, thus separating structure and behavior.

Thus AngularJS handles most of the JavaScript problems by following the best practices.

Happy Coding with AngularJS