Handling a text field and submit button with Ajax
There are two schools of thought


Programmatic
Declarative


Your example here is programmatic, where JavaScript is binding events after the DOM load. The problem I have with programmatic is, using your words, although it "keeps the behavior away from the markup" it moves the markup into the behavior. The interface that is needed to reuse the same JavaScript is now tied to what is defined on the page. Using declarative, your example being onclick="something(args);", I can more easily follow a Model View Presenter (MVP) pattern where the view simply forwards all events to the Presenter to perform the business logic.

Here the events can be organized into a class object to remove them from the global namespace. Scope can be controlled by passing in the model as a parameter.

presenter.js

function Presenter(parameter) {

  // private variables
  var myVar;

  // public method
  this.submit = function() {
  };

  // private method
  function doSomething() {
  }
}


page.html

...
&lt;script type="text/javascript" src=".../presenter.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
  var presenter = new Presenter(...);
&lt;/script&gt;
...
&lt;button onclick="presenter.onButtonClick();"&gt;Click me&lt;/button&gt;