DOM Event Handling

An event is a notification that something specific has occurred, triggered by either the browser or a user action.

An event handler is a script that is implicitly executed in response to an event.

The process of connecting an event handler to an event is called registration.

Note: Don't use document.write in an event handler, because the output may overwrite the display.

A text element gets focus in three ways:

Event handlers can be registered:

By assigning the event handler script to an event tag attribute:

<input type = "button" id = "myButton" onclick = "alert('Mouse click!');" />
By assigning a function to an event tag attribute:

<input type = "button" id = "myButton" onclick = "myHandler();" />

Plain buttons

Register the handler function with the input attribute onclick.
<input type = "button" id = "freebutton" onclick = "freeButtonHandler();" />
Register by assigning the handler to the associated event property.
<input type = "button" id = "freebutton" />
document.getElementById("freebutton").onclick = "freeButtonHandler();"

Radio buttons

If planeChoice is the name of the handler (i.e., the function) and the value of a button is 172, use
onclick = "planeChoice(172);"
Alternatively, assign the handler to the property associated with the element.
var dom = document.getElementById("myForm");
dom.elements[0].onclick = planeChoice;
- This registration must follow both the handler function and the HTML form.
- All radio buttons in the group must be assigned.
Since no parameter is passed, the handler function must use the checked property to determine whether a button is clicked.
- If the name of the buttons is planeButton...
  var dom = document.getElementById("myForm");
  for (i=0; i {
  if (dom.planeButton[i].checked)
  {
  plane = dom.planeButton[i].value;
  break; // why use this? BAD!
  }
  }
- Visit the iteration notes to see how to avoid breaks.

The disadvantage of assigning handlers to event properties is that there is no way to use parameters.
The advantages of assigning handlers to event properties are:
1. It is better to keep HTML and JavaScript separate.
2. The handler could be changed dynamically.

The Focus Event
- Can be used to detect illicit changes to a text box by blurring the element every time the element acquires focus.
Checking Form Input
- A good use of JavaScript, because it finds errors in form input before it is sent to the server for processing, so it saves both server time and Internet time.