javascript - using function calls in html - bad or good?

Question

Using angular brings lot of weird style of code. For example I always thought that this

<button onclick="myFunction()">Click me</button>

style I should not ever use, except when I would be lazy and want quick and dirty code. And I never used such style in projects and also I even thinked that this is bad.

Now when I see angular

here is the example:

<div enter="loadMoreTweets()">Roll over to load more tweets</div>

which is from there http://www.thinkster.io/pick/IgQdYAAt9V/angularjs-directives-talking-to-controllers

which is good style by the tutorial. I dont get it. So then it means earlier example with onclick is also perfectly good? Then why nobody uses it at least these days when people use lot of jquery for example?

Answer 1

Let me cite from a book Angular, by Brad Green & Shyam Seshardi

Chapter 2 ... A Few Words on Unobtrusive JavaScript

The idea of unobtrusive JavaScript has been interpreted many ways, but the rationale for this style of coding is something along the following lines:

1. Not everyone’s browser supports JavaScript. Let everyone see all of your content and use your app without needing to execute code in the browser.
2. Some folks use browsers that work differently. Visually impaired folks who use screen-readers and some mobile phone users can’t use sites with JavaScript.
3. Javascript works differently across different platforms. IE is usually the culprit here. You need to put in different event-handling code depending on the browser.
4. These event handlers reference functions in the global namespace. It will cause you headaches when you try to integrate other libraries with functions of the same names.
5. These event handlers combine structure and behavior. This makes your code more difficult to maintain, extend, and understand.

In most ways, life was better when you wrote JavaScript in this style. One thing that was not better, however, was code complexity and readability. Instead of declaring your event handler actions with the element they act on, you usually had to assign IDs to these elements, get a reference to the element, and set up event handlers with callbacks...

...

In Angular, we decided to reexamine the problem.

The world has changed since these concepts were born...

... for most inline event handlers Angular has an equivalent in the form of ng-eventhandler="expression" where eventhandler would be replaced by click, mousedown, change, and so on. If you want to get notified when a user clicks on an element, you simply use the ng-click directive like this:

<div ng-click="doSomething()">...</div>

Is your brain saying “No, no, no! Bad, bad, bad!”? The good news is that you can relax.

These directives differ from their event handler predecessors in that they:

• Behave the same in every browser. Angular takes care of the differences for you.
• Do not operate on the global namespace. The expressions you specify can

To get more details, read the book: http://www.amazon.com/AngularJS-Brad-Green/dp/1449344852

EXTEND

Following the discussion in comments, I would like to add a more explanation.

As stated here: Wikipedia - AngularJS:

Angular is a framework, which goal is to augment browser-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier

The Model–view–controller, a short extract from wikipedia:

• A controller can send commands to the model to update the model's state (e.g., editing a document). It can also send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document).
• A model notifies its associated views and controllers when there has been a change in its state. This notification allows views to update their presentation, and the controllers to change the available set of commands. In some cases an MVC implementation might instead be "passive," so that other components must poll the model for updates rather than being notified.
• A view is told by the controller all the information it needs for generating an output representation to the user. It can also provide generic mechanisms to inform the controller of user input.

Summary:

The most important part here, is the fact, that View can publish the Controllers actions to the user. And this is exactly what the Function calls in HTML do represent.

Answer 2

This is a misunderstanding:

Using angular brings lot of weird style of code. For example I always thought that this

<button onclick="myFunction()">Click me</button>

style I should not ever use, except when I would be lazy and want quick and dirty code. And I never used such style in projects and also I even thinked that this is bad.

It is perfectly valid to use that style of code if you can decide what event handler to attach to the button when you render the HTML code. With jQuery we see many dynamically attached event handlers because many times the elements themselves are dynamically inserted or whether to attach an event listener or what to attach is dynamically decided.